title: How to combine minmax function with vh in css grid?
body: <p>I want to set one rows height in mobile view to maximum of 670px and below that minimum of 100vh, but when I write it like this:</p>
  
  <pre><code>@media only screen and (max-width: $bp-mobile) {
      grid-template-rows: minmax(100vh, 67rem) repeat(7, max-content);
    }
  </code></pre>
  
  <p>It always expands me first row to 100vh if viewport height equals 1000px my row has getting height of 1000px. How to combine <code>vh</code> below that specific maximum height <code>670px</code> to be always <code>100vh</code> and over <code>670px</code> to lock this row to <code>670px</code> of height?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    border: 2px solid red;
    grid-template-rows: minmax(100vh, 67rem) 1fr;
  }
  
  .test-1 {
    background-color: orangered;
  }
  .test-2 {
    background-color: cyan;
    height: 30rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="test-1"&gt;1&lt;/div&gt;
    &lt;div class="test-2"&gt;2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>