Colocación del contenido de los elementos de la grilla en el contenedor primario (función de subgrid)

Todas las guías sobre la cuadrícula CSS parecen implicar una estructura donde los elementos posicionados en una cuadrícula son hijos de la misma cuadrícula.

A
B

Donde .wrapper tiene display: grid y una definición de las propiedades de la grilla.

¿Tiene algún sentido si quiero posicionar un elemento que es un “nieto” de la grilla, en la grilla misma (en lugar de confiar en su padre?)

 
A
B
C

Aquí, quiero poder poner A, B y C cada uno en su propia fila de la grilla; ¿Eso tendría sentido?

display: subgrid

De la especificación borrador de CSS Grid Level 2 :

2. Contenedores de rejilla

Las subredes proporcionan la capacidad de pasar los parámetros de la grilla a través de elementos nesteds, y la información de tamaño basada en el contenido vuelve a su cuadrícula principal.

Si el elemento es un elemento de cuadrícula (es decir, está en flujo y su elemento primario es un contenedor de cuadrícula), display: subgrid convierte el elemento en una sub-cuadrícula (que es un tipo especial de cuadro de contenedor de cuadrícula) y por lo tanto ignora su grid-template-* y grid-*-gap propiedades a favor de la adopción de las rejillas de la matriz principal que abarca.

3. Subgrids

Un elemento de cuadrícula puede ser un contenedor de cuadrícula al display: grid . En este caso, el diseño de sus contenidos será independiente del diseño de la grilla en la que participa.

En algunos casos, puede ser necesario que los contenidos de varios elementos de la cuadrícula se alineen entre sí. Un contenedor de cuadrícula que es en sí mismo un elemento de cuadrícula puede diferir la definición de sus filas y columnas a su contenedor de cuadrícula principal mediante display: subgrid , convirtiéndola en una subgrid.

En este caso, los elementos de la cuadrícula de la subgrid participan en el dimensionamiento de la cuadrícula del contenedor de cuadrícula principal, permitiendo que el contenido de ambas cuadrículas se alinee. Lee mas.

Esta característica aún no se ha implementado en los principales navegadores. Quién sabe cuándo será.

En Grid, solo los elementos secundarios del contenedor en flujo se convierten en elementos de cuadrícula y pueden aceptar propiedades de cuadrícula.

Con display: subgrid en un elemento de grid, los elementos display: subgrid del elemento respetan las líneas del contenedor.

De acuerdo con la especificación de Grid Level 1 , display: subgrid ha display: subgrid al nivel 2 .

Por ahora, display: grid en elementos de la cuadrícula (es decir, contenedores de cuadrícula nesteds) puede ser útil en algunos casos.

Otra solución posible es display: contents . El método se explica aquí:

  • ¿Qué es una alternativa a css subgrid?

Más información: