Penggabungan Baris dalam CSS Grid

Baris dan kolom dalam grid membentuk jaringan. Kita dapat membuat sebuah elemen menempati bukan hanya satu sel jaringan, tetapi beberapa.

Agar sebuah elemen menempati lebih dari satu baris, kita harus memberikan properti grid-row. Dalam properti ini, dipisahkan oleh garis miring, diberikan angka yang menunjukkan posisi awal dan akhir elemen dalam grid.

Dengan demikian, elemen akan membentang dari posisi pertama hingga posisi kedua (tidak termasuknya). Artinya, nilai 1 / 2 akan membuat elemen menempati satu sel pertama saja, sedangkan nilai 1 / 3 akan membuat elemen menempati sel pertama dan kedua (tetapi tidak termasuk yang ketiga).

Contoh

Misalkan kita memiliki grid dengan tiga elemen anak. Mari kita menempatkannya sehingga elemen pertama menempati dua baris:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* dua baris */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Contoh

Sekarang mari kita berikan blok keempat tiga baris:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Tugas Praktis

Tempatkan semua elemen dan lakukan penggabungan baris sesuai dengan contoh berikut: