Rejillas implícitas en CSS
Una rejilla implícita es creada automáticamente por el navegador, cuando la cantidad de elementos no cabe en la rejilla explícita. Veamos cómo sucede esto.
Supongamos que tenemos cuatro bloques:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem3">4</div>
</div>
Supongamos que nuestra rejilla tiene dimensiones
3 por 3:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
Coloquemos tres de nuestros bloques en la rejilla:
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
Y coloquemos el cuarto bloque en la cuarta fila y columna:
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
Dado que nuestra rejilla es de tamaño
3 por 3, dicha
cuarta fila y columna no existirán en esta
rejilla. Pero no existirán de forma explícita,
es decir, en la definida por nosotros. Pero el navegador
las creará de forma implícita, es decir, por sí mismo.
Además, dado que solo especificamos las dimensiones para la rejilla explícita, para las celdas fuera de esta rejilla las dimensiones serán calculadas por el navegador. Es decir, en nuestro caso las dimensiones del cuarto bloque serán establecidas automáticamente por el navegador.
Veamos qué obtenemos:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
:
Supongamos que tienes 6 bloques en tu rejilla.
Coloca 3 bloques en la rejilla explícita,
y tres bloques en la implícita.
