title: Can I set css grid row height based on if anything targets it with grid-area?
body: <p>Is it possible to set a css grid row height based on if the grid area is being used?</p>
  <pre class="lang-css prettyprint-override"><code>.container {
  
    height: 100vh;
  
    grid-template-areas: 
      &quot;mobile-head mobile-head mobile-head&quot; 
      &quot;nav app app&quot;
      &quot;footer footer footer&quot;;
  }
  
  .nav {
    grid-area: nav
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code> &lt;div class=&quot;container&quot;&gt;
     &lt;div class=&quot;nav&quot;&gt;Nav stuff&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Given the above grid template and html, I see the Nav stuff in the nav area, but naturally the mobile nav area is taking a 1/3rd of the screen height.  Because there is no div that has a grid-area: mobile-head I want the height to be 0px.</p>
  <p>But if I change the .nav to</p>
  <pre class="lang-css prettyprint-override"><code>...
    .nav {
      grid-area: mobile-head 
  }
  </code></pre>
  <p>I would want the row to be a fixed height of say 200px.</p>
  <p>I can get close.  I can get the row to have a height of 0 when there is nothing in the mobile-area by doing this:</p>
  <pre class="lang-css prettyprint-override"><code>  ...
    grid-template-rows: minmax(0px, auto) 1fr 1fr
  </code></pre>
  <p>But then the height is dictated by the content, rather than the grid.</p>
  <p>I'm fairly sure the only alternative to achieve what im trying to do is to use 2 grids, and media queries.  (I want to place the nav on the left for desktop, or top if mobile)</p>