Ички CSS гридлар

Грид тизимида ўз яратилган торга яна янги ички грид қўшиш имкони мавжуд. Ички гридлар веб-саҳифа блоклари ичидаги кичкина элементларни жойлаштиришда кенг қўлланилади. Бу имкониятдан фойдаланиш учун, фарзанд элементнинг ўзида display хусусиятини grid қийматига ўрнатиш керак.

Мисол учун, келгина, гриднинг битта ҳужайрасида яна битта грид яратайлик:

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

Сизда уч усту́н бўйича жойлашган беш элементдан иборат грид бор бўлсин. Иккинчи элементда ички грид яратинг, унда ўз навбатида учта фарзанд элемент бўлсин.

Олдинги машқни ички гридда бешта фарзанд элемент бўладиган қилиб ўзгартиринг.

Биринчи ва учинчи элементларда учта фарзанд элементли ички грид яратинг.