Numančiai CSS tinkleliai

Numančias tinklelis naršyklė sukuria automatiškai, kai elementų skaičius netelpa į aiškų tinklelį. Pažiūrėkime, kaip tai vyksta.

Tarkime, kad turime keturis blokus:

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

Tarkime, kad mūsų tinklelio matmenys yra 3 iš 3:

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

Išdėstykime tris savo blokus pagal tinklelį:

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

O ketvirtąjį bloką pastatysime ketvirtoje eilutėje ir stulpelyje:

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

Kadangi mūsų tinklelio dydis yra 3 iš 3, tokios ketvirtos eilutės ir stulpelio šiame tinklelyje nebus. Tačiau jų nebus aiškiai, tai yra mūsų nustatytame. Bet naršyklė sukurs jas numančiai, tai yra pati.

Tuo pat metu, kadangi dydžius nurodėme tik aiškiam tinkleliui, tai ląstelėms už šio tinklelio ribų dydžiai bus apskaičiuojami naršyklės. Tai yra mūsų atveju ketvirtojo bloko dydžiai bus nustatyti naršyklės automatiškai.

Pažiūrėkime, ką gausime:

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

Tarkime, jūsų tinklelyje yra 6 blokai. Išdėstykite 3 blokus aiškiame tinklelyje, o tris blokus numančiame.