¿Tiene CSS Grid una función de crecimiento flexible?

¿Hay un análogo a flex-grow para la propiedad de la red ?

Me gustaría que mis áreas de cuadrícula se adapten al contenido que reciben, pero que algunas áreas ocupen más lugar que otras, como flex-grow para flex .

Prácticamente, en el siguiente ejemplo me gustaría

  • El turquoise es invisible porque acomoda su contenido.
  • El footer de footer es invisible también porque no tiene contenido.
  • La sección central toma el rest de la página como flex-grow .

Más prácticamente, me gustaría este código:

 .ctnr { display: grid; min-height: 100vh; grid-template-areas: "header header" "nav main" "footer footer"; } .test { background: black; height: 1rem; } header { grid-area: header; background: turquoise; } nav { grid-area: nav; background: grey; } main { grid-area: main; } footer { grid-area: footer; background: yellow } 
 

Para actuar como este código:

 .ctnr { display: flex; flex-direction: column; height: 100vh; } .panel { flex-grow: 1; display: flex; } header { flex-grow: 0; background: turquoise; } nav { min-width: 10rem; background: grey } footer { background: yellow } 
 
hey

Sin el div.panel y sin añadir ninguna etiqueta adicional.

La razón por la que me gustaría hacer esto es legítima, ese elemento div extra me está molestando.

CSS Grid ofrece la unidad fr , que funciona de manera similar a flex-grow .

Mientras flex-grow distribuye el espacio libre en el contenedor entre los elementos flexibles, la unidad fr distribuye el espacio libre en el contenedor entre filas / columnas.

De la especificación:

7.2.3. Longitudes flexibles: la unidad fr

Una longitud flexible o es una dimensión con la unidad fr , que representa una fracción del espacio libre en el contenedor de la cuadrícula.

(Tenga en cuenta que flex-grow se aplica a los elementos flexibles , mientras que las longitudes fr se aplican a los contenedores de rejilla ).

Así que en tu cuadrícula, tienes tres filas:

  1. La primera fila es el encabezado. Desea que el contenido establezca su altura. Así que su altura se establece en auto .

  2. La última fila es el pie de página. Desea que el contenido establezca su altura. Así que su altura se establece en auto .

  3. La fila del medio contiene los elementos de nav y main . Desea que esta fila ocupe todo el espacio vertical restante. Así que su altura se establece en 1fr .

 .ctnr { display: grid; grid-template-rows: auto 1fr auto; /* key rule */ grid-template-columns: 1fr 1fr; height: 100vh; grid-template-areas: "header header" "nav main" "footer footer"; } header { grid-area: header; background: turquoise; } nav { grid-area: nav; background: grey; } main { grid-area: main; background: orange; } footer { grid-area: footer; background: yellow; } body { margin: 0; } 
 
header
main
footer