Gridi Zisizo Wazi katika CSS

Gridi isiyo wazi huundwa kiotomatiki na kivinjari, wakati idadi ya vipengele haitoshi kwenye gridi iliyo wazi. Acha tuone jinsi hii inavyotokea.

Tuchukulie tuna vizuizi vinne:

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

Tuchukulie gridi yetu ina vipimo 3 kwa 3:

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

Tuweke vizuizi vitatu vyetu kwenye gridi:

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

Na kizuizi cha nne tuweke kwenye safu ya nne na kolumni ya nne:

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

Kwa kuwa gridi yetu ina ukubwa wa 3 kwa 3, basi hiyo safu ya nne na kolumni ya nne kwenye hii gridi haitakuipo. Lakini hazitakupo kwa namna iliyo wazi, yaani kile tulicho weka. Lakini kivinjari kitaunda kwa njia isiyo wazi, yaani yenyewe.

Wakati huo huo, kwa kuwa tulibainisha vipimo tu kwa gridi iliyo wazi, basi kwa seli zilizo nje ya gridi hii vipimo vitahesabiwa na kivinjari. Yaani kwa upande wetu vipimo vya kizuizi cha nne vitawekwa kiotomatiki na kivinjari.

Acha tuone nini kitatokea:

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

Tuchukulie kwenye gridi yako kuna vizuizi 6. Weka 3 vizuizi kwenye gridi iliyo wazi na vizuizi vitatu kwenye gridi isiyo wazi.