Подгридҳо дар CSS

Подгрид як навъи шабакаи дохилшаванда мебошад, вале бар хилофи он, ба андозаи контейнери шабакаи волидайн таъсир мерасонад. Барои муайян кардани подгрид бояд дар худи унсури фарзанд хосияти display бо қимати subgrid гузошта шавад.

Барои мисол, биёед дар унсури чорум шабакаи дохилшаванда эҷод кунем:

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

Фарз мекунем, ки шумо шабакае доред, ки аз панҷ унсур иборат аст, ки дар ду сутун ҷойгир шудаанд. Дар унсури сеюм шабакаи дохилшавандае эҷод кунед, ки дар он ба навбат ду унсури фарзанд мавҷуд бошад.

Машқи қаблиро тағйир диҳед, то дар шабакаи дохилшаванда чор унсури фарзанд мавҷуд бошад.

Ду шабакаи дохилшаванда эҷод кунед - дар унсури дуюм ва панҷум.