attribute - title tag html

¿Cómo puedo especificar las alturas de las filas en el diseño de cuadrícula CSS?

Question

Tengo un diseño de cuadrícula CSS en el que quiero hacer que algunas filas (centro 3) se extiendan hasta su tamaño máximo. Probablemente estoy buscando una propiedad similar a la que flex-grow: 1 hace con Flexbox pero parece que no puedo encontrar una solución.

Nota: Esto está destinado solo para una aplicación Electron , por lo que la compatibilidad del navegador no es realmente una preocupación.

Tengo el siguiente diseño de cuadrícula CSS:

.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>

Que crea la siguiente rejilla:

Cuando ninguna de las casillas contenga contenido, me gustaría que la cuadrícula se pareciera a esto:

Answer 1

Una de las publicaciones relacionadas me dio la respuesta (simple).

Al parecer, el valor auto en la propiedad grid-template-rows hace exactamente lo que estaba buscando.

.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);
}