CSS-da Podgridlar

Podgrid ichki gridning bir turi hisoblanadi, lekin undan farqli o'laroq, ota-grid o'lchamiga ta'sir qiladi. Podgridni o'rnatish uchun bolalar elementida o'ziga xos display xususiyatini subgrid qiymatiga o'rnatish kerak.

Misol uchun, keling to'rtinchi elementda ichki grid yarataylik:

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

Sizda ikkita ustun bo'yicha joylashtirilgan beshta elementdan tashkil topgan grid bor deb faraz qilaylik. Uchinchi elementda o'z navbatida ikkita bolalar elementidan iborat ichki grid yarating.

Oldingi vazifani shunday o'zgartiringki, ichki gridda to'rtta bolalar elementi bo'lsin.

Ikkinchi va beshinchi elementlarda ikkita ichki grid yarating.