title: CSS Grid with variable number of "auto" rows, but one row should take "1fr"
body: <p>I'm fiddling around with a CSS grid-based frontend and the following behaviour is required over and over and over again in different parts of the frontend:</p>
  
  <ol>
  <li>A grid with a variable number of rows.</li>
  <li>Every row should have a variable size (auto will do).</li>
  <li>The last row should always take up all the remaining space. </li>
  </ol>
  
  <p>So in the case I happen to need five rows, this does the trick:</p>
  
  <pre><code>.myGridForFiveRows
  {
      display: grid;
      grid-template-rows: auto auto auto auto 1fr;
  }
  </code></pre>
  
  <p>However, I'd really like a stylesheet that yields the correct behaviour for any given number of rows. I thought maybe I could somehow use <code>repeat()</code> to do this?</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeat" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/repeat</a></p>
  
  <pre><code>.myGrid
  {
      display: grid;
      grid-template-rows: repeat(auto-fit, auto) 1fr;
  }
  </code></pre>
  
  <p>I've been playing around with variants of <code>repeat(auto-fit, auto)</code> and <code>repeat(auto-fill, auto)</code>, which unfortunately aren't legit CSS, while <code>repeat(4, auto)</code> or <code>repeat(auto-fill, 30px)</code> are.</p>
  
  <p>Any idea? It's not something I can't circumvent, but it just so happens that "display n properly sized rows, then let the last element take up all the remaining space" is basically the default behaviour for all elements in my spec...</p>