How do I specify row heights in CSS Grid layout?

Question

I have a CSS Grid Layout in which I want to make some (middle 3) rows stretch to their maximum size. I'm probably looking for a property similar to what flex-grow: 1 does with Flexbox but I can't seem to find a solution.

Note: This is intended for an Electron app only, so browser compatibility is not really a concern.

I have the following CSS Grid Layout:

.grid {    display: grid;    grid-template-columns: 1fr 1.5fr 1fr;    grid-gap: 10px;    height: calc(100vh - 10px);  }    .grid .box {    background-color: grey;  }    .grid .box:first-child,  .grid .box:last-child {    grid-column-start: 1;    grid-column-end: -1;  }    /* These rows should 'grow' to the max height available. */  .grid .box:nth-child(n+5):nth-child(-n+7) {    grid-column-start: 1;    grid-column-end: -1;  }

<div class="grid">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>

Which creates the following grid:

When none of the boxes contain any content I would like the grid to look something like this:

Answer 1

One of the Related posts gave me the (simple) answer.

Apparently the auto value on the grid-template-rows property does exactly what I was looking for.

.grid {     display:grid;     grid-template-columns: 1fr 1.5fr 1fr;     grid-template-rows: auto auto 1fr 1fr 1fr auto auto;     grid-gap:10px;     height: calc(100vh - 10px); }