css - Posicionar el contenido de los elementos de la cuadrícula en el contenedor primario(función de subcuadrícula)
css3 css-grid (1)
display: subgrid
De la especificación borrador de CSS Grid Level 2 :
Las subcuadrículas proporcionan la capacidad de pasar parámetros de cuadrícula a través de elementos anidados, y la información de dimensionamiento basada en 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: subgridhace que el elemento sea una subcuadrícula (que es un tipo especial de cuadro de contenedor de cuadrícula) y, en consecuencia, ignora sugrid-template-*ygrid-*-gappropiedades degrid-*-gapa favor de adoptar las pistas de grid principales que abarca.Un elemento de cuadrícula puede ser un contenedor de cuadrícula al
display: grid. En este caso, el diseño de su contenido será independiente del diseño de la cuadrícula 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, lo que lo convierte en una subcuadrícula.En este caso, los elementos de cuadrícula de la subcuadrícula participan en el dimensionamiento de la cuadrícula del contenedor de cuadrícula principal, lo que permite 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 la cuadrícula, solo los elementos secundarios de flujo del contenedor se convierten en elementos de cuadrícula y pueden aceptar propiedades de cuadrícula.
Con
display: subgrid
en un elemento de cuadrícula, los elementos
display: subgrid
del elemento respetan las líneas del contenedor.
De acuerdo con la
especificación de Nivel de cuadrícula 1
,
display: subgrid
se ha diferido al
Nivel 2
.
Por ahora,
display: grid
en elementos de grid (es decir, contenedores de grid anidados) puede ser útil en algunos casos.
Otra posible solución es la
display: contents
.
El método se explica aquí:
- ¿Qué es una alternativa a la subcuadrícula css?
Más información:
Todas las guías sobre la cuadrícula CSS parecen implicar una estructura en la que los elementos posicionados en una cuadrícula son elementos secundarios de la propia cuadrícula.
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
Donde
.wrapper
tiene
display: grid
y una definición de las propiedades de grid.
¿Tiene algún sentido si quiero posicionar un elemento que es un "nieto" de la cuadrícula, en la propia cuadrícula (en lugar de confiar en su padre?)
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
Aquí, quiero poder poner A, B y C cada uno en su propia fila de la cuadrícula; ¿eso tendría sentido?