CSS Grid Bersarang

Dalam sistem grid, ada kemungkinan untuk menambahkan grid bersarang baru ke dalam grid yang telah dibuat. Grid bersarang banyak digunakan untuk menempatkan elemen-elemen kecil di dalam blok situs. Untuk menggunakan kemungkinan ini, Anda perlu menetapkan properti display dengan nilai grid pada elemen anak itu sendiri.

Sebagai contoh, mari kita buat grid lain di 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;
}

Misalkan Anda memiliki grid yang terdiri dari lima elemen, ditempatkan dalam tiga kolom. Buatlah grid bersarang di dalam elemen kedua, yang di dalamnya akan terdapat tiga elemen anak.

Ubah tugas sebelumnya sehingga ada lima elemen anak di dalam grid bersarang.

Buatlah grid bersarang dengan tiga elemen anak di dalam elemen pertama dan ketiga.