title: How to define the height of a row when using CSS Grid Layout?
body: <p>I've managed to create a very simple layout so that the <code>&lt;div class="content"&gt;</code> fills to the remaining available height.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;div class="page"&gt;
          &lt;div class="header"&gt;HEADER&lt;/div&gt;
          &lt;div class="nav"&gt;NAV&lt;/div&gt;
          &lt;div class="content"&gt;CONTENT&lt;/div&gt;
          &lt;div class="footer"&gt;FOOTER&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.page {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      height: 100vh;
  }
  </code></pre>
  
  <p>In the feature, i could add a new row, like so</p>
  
  <pre><code>&lt;div class="page"&gt;
      &lt;div class="header"&gt;HEADER&lt;/div&gt;
      &lt;div class="nav"&gt;NAV&lt;/div&gt;
      &lt;div class="filter"&gt;FILTER&lt;/div&gt;
      &lt;div class="content"&gt;CONTENT&lt;/div&gt;
      &lt;div class="footer"&gt;FOOTER&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then, i will need to change again the CSS</p>
  
  <pre><code>grid-template-rows: auto auto auto 1fr auto;
  </code></pre>
  
  <p>So, is there a way to tell CSS to make all of the rows <code>auto</code>, including those added in the future, but just keep <code>&lt;div class="content"&gt;</code> to <code>1fr</code></p>
  
  <p>That way i can add rows dynamically without the need to keep changing the css.
  Thanks</p>