Subgrid'ai CSS

Subgrid'as yra įdėto grid'o variantas, bet skirtingai nuo jo, jis veikia tėvinio grid konteinerio dydį. Norint nustatyti subgrid'ą, reikia pačiame vaikiniame elemente nustatyti savybę display su reikšme subgrid.

Pavyzdžiui, sukurkime įdėtą grid'ą ketvirtame elemente:

<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: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Tarkime, kad turite grid'ą, sudarytą iš penkių elementų, išdėstytų per du stulpelius. Sukurkite trečiajame elemente įdėtą grid'ą, kuriame savo ruožtu bus du vaikiniai elementai.

Pakeiskite ankstesnę užduotį taip, kad įdėtame grid'e būtų keturi vaikiniai elementai.

Sukurkite du įdėtus grid'us - antrajame elemente ir penktuose elementuose.