Dimensiunile gridurilor implicite în CSS
Gridul implicit determină singur dimensiunile acelor elemente,
care ies în afara limitelor sale. Cu toate acestea, la
nevoie, aceste dimensiuni pot fi setate folosind
proprietățile grid-auto-columns și
grid-auto-rows.
Să facem acest lucru:
<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;
}
:
Să presupunem că în gridul tău sunt 9 blocuri.
Plasează o parte dintre blocuri în gridul
explicit, iar o parte dintre blocuri în cel implicit.
Setează dimensiunile blocurilor din partea implicită.
