Subgrid dalam CSS

Subgrid ialah variasi grid bersarang, tetapi berbeza daripadanya, ia mempengaruhi saiz grid kontena induk. Untuk menetapkan subgrid, anda perlu menggunakan sifat display dengan nilai subgrid pada elemen anak itu sendiri.

Sebagai contoh, mari kita cipta grid bersarang dalam elemen keempat:

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

Andaikan anda mempunyai grid yang terdiri daripada lima elemen, disusun dalam dua lajur. Cipta grid bersarang dalam elemen ketiga, yang mana di dalamnya terdapat dua elemen anak.

Ubah suai tugas sebelumnya supaya grid bersarang mengandungi empat elemen anak.

Cipta dua grid bersarang - dalam elemen kedua dan elemen kelima.