Implitsiitsed CSS-võred

Implitsiitne võre luuakse brauseri poolt automaatselt, kui elementide arv ei mahu selgesõnalisesse võrku. Vaatame, kuidas see toimub.

Oletame, et meil on neli plokki:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Oletame, et meie võre mõõtmed on 3 korda 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Paigutame kolm meie plokki võrgu järgi:

#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;
}

Ja neljanda ploki paigutame neljandasse ritta ja veergu:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Kuna meie võre on mõõtmetega 3 korda 3, siis sellist neljandat rida ja veergu selles võres ei ole. Kuid neid ei ole selgesõnaliselt, see tähendab meie poolt määratud kujul. Kuid brauser loob need implitsiitselt, see tähendab ise.

Sel juhul, kuna me määrasime mõõtmed ainult selgesõnalisele võrgle, siis rakkude jaoks väljaspool seda võrku mõõtmed arvutatakse brauseri poolt. See tähendab meie puhul mõõtmed neljandale plokile määratakse brauseri poolt automaatselt.

Vaatame, mis meil saab:

<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;
}

Oletame, et teie võrgus on 6 plokki. Paigutage 3 plokki selgesõnalisesse võrku ja kolm plokki implitsiitsesse võrku.