Įdėtiniai CSS tinkleliai

Tinklelio sistemoje yra galimybė į savo sukurtą tinklelį pridėti naują įdėtinį tinklelį. Įdėtiniai tinkleliai plačiai naudojami talpinant mažus elementus svetainės blokuose. Norint pasinaudoti šia galimybe, reikia pačiame vaikiniame elemente nustatyti savybę display su reikšme grid.

Pavyzdžiui, vienoje iš tinklelio ląstelių sukurkime dar vieną tinklelį:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tarkime, kad turite tinklelį, sudarytą iš penkių elementų, išdėstytų trimis stulpeliais. Antrame elemente sukurkite įdėtinį tinklelį, kuriame savo ruožtu bus trys vaikiniai elementai.

Pakeiskite ankstesnį uždavinį taip, kad įdėtiniame tinklelyje būtų penki vaikiniai elementai.

Pirmame ir trečiame elementuose sukurkite po įdėtinį tinklelį su trimis vaikiniais elementais.