CSS: how to set first grid row to fixed height and then distribute height for dynamic number of grid rows following that

Question

I'm using grid. I have my first row as 20px and I want all subsequent rows to use 1fr to distribute the height evenly. I am doing grid-template-rows: 20px repeat(2, 1fr); but that only applies to my set number of divs in my code. I want it to work for a dynamic number of divs. I tried grid-template-rows: 20px repeat(auto-fill, 1fr); but that just set them all evenly (even the first one).

 html, body { height: 100%; }.container { display: grid; grid-gap: 20px; grid-template-columns: 20px 1fr; grid-template-rows: 20px repeat(2, 1fr); background: green; height: 100%; }.container div { background: grey; }

 <div class="container"> <div>11</div> <div>22</div> <div>33</div> <div>44</div> <div>55</div> </div>

Answer 1

use grid-auto-rows

 body { margin:0; }.container { display: grid; grid-gap: 20px; grid-template-columns: 20px 1fr; grid-template-rows: 20px; /* first one 20px */ grid-auto-rows:1fr; /* all the others 1fr */ background: green; height: 100vh; }.container div { background: grey; }

 <div class="container"> <div>11</div> <div>22</div> <div>33</div> <div>44</div> <div>55</div> <div>66</div> <div>77</div> </div>