Tamaños de los grids implícitos en CSS
El grid implícito determina por sí mismo los tamaños de los elementos
que se salen de sus límites. Sin embargo, si es
necesario, estos tamaños se pueden definir usando las
propiedades grid-auto-columns y
grid-auto-rows.
Hagámoslo:
<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-auto-columns: 100px;
grid-auto-rows: 100px;
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 9 bloques en tu grid.
Coloca algunos bloques en la parte
explícita del grid y otros en la parte implícita.
Define los tamaños para los bloques en la parte implícita.
