Implicitne mreže v CSS
Implicitna mreža je samodejno ustvarjena s strani brskalnika, ko število elementov ne gre v eksplicitno mrežo. Poglejmo, kako se to zgodi.
Recimo, da imamo štiri bloke:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem3">4</div>
</div>
Naj bo naša mreža dimenzij
3 krat 3:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
Postavimo tri naše bloke v mrežo:
#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;
}
Četrti blok pa postavimo v četrto vrstico in stolpec:
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
Ker je naša mreža dimenzij
3 krat 3, takšne
četrte vrstice in stolpca v tej
mreži ne bo. Vendar jih ne bo v eksplicitni obliki,
to je v tisti, ki smo jo določili mi. Ampak brskalnik
jih bo ustvaril implicitno, to je sam.
Pri tem, ker smo dimenzije navedli le za eksplicitno mrežo, bodo za celice zunaj te mreže dimenzije izračunane s strani brskalnika. To pomeni, da bodo v našem primeru dimenzije četrtega bloka določene avtomatično s strani brskalnika.
Poglejmo, kaj smo dobili:
<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;
}
:
Recimo, da je v vaši mreži 6 blokov.
Postavite 3 bloke v eksplicitno
mrežo, tri bloke pa v implicitno.