Subgrids en CSS
El subgrid es una variación de la cuadrícula anidada,
pero a diferencia de esta, afecta el tamaño
del contenedor de cuadrícula padre.
Para definir un subgrid, es necesario
establecer en el propio elemento hijo la propiedad
display con el valor subgrid.
Por ejemplo, creemos una cuadrícula anidada en el cuarto elemento:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: subgrid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 5px;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Supongamos que tienes una cuadrícula que consta de cinco elementos, distribuidos en dos columnas. Crea en el tercer elemento una cuadrícula anidada, que a su vez tenga dos elementos hijos.
Modifica la tarea anterior para que la cuadrícula anidada contenga cuatro elementos hijos.
Crea dos cuadrículas anidadas - en el segundo elemento y en el quinto elemento.
