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.