Grid CSS Bersarang

Sistem grid membolehkan anda menambah grid bersarang baharu ke dalam grid yang telah dicipta. Grid bersarang digunakan secara meluas untuk meletakkan elemen kecil di dalam blok tapak web. Untuk menggunakan keupayaan ini, anda perlu menetapkan sifat display dengan nilai grid pada elemen anak itu sendiri.

Sebagai contoh, mari kita cipta grid lain dalam salah satu sel 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;
}

Katakan anda mempunyai grid yang terdiri daripada lima elemen, disusun dalam tiga lajur. Cipta grid bersarang dalam elemen kedua, yang seterusnya mengandungi tiga elemen anak.

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

Cipta grid bersarang dengan tiga elemen anak dalam elemen pertama dan ketiga.