Penggabungan Baris dalam CSS Grid

Baris dan lajur dalam grid membentuk jaringan. Kita boleh membuat elemen mengambil bukan satu sel jaringan, tetapi beberapa.

Untuk membolehkan elemen mengambil lebih dari satu baris, kita perlu menetapkan sifat grid-row kepadanya. Dalam sifat ini, nombor ditentukan melalui garis miring yang menunjukkan kedudukan permulaan dan kedudukan akhir elemen dalam grid.

Pada masa yang sama, elemen akan meregang dari kedudukan pertama hingga ke kedudukan kedua (tidak termasuknya). Maksudnya, nilai 1 / 2 akan menyebabkan elemen mengambil satu sel pertama sahaja, manakala nilai 1 / 3 akan menyebabkan elemen mengambil sel pertama dan sel kedua (tetapi tidak termasuk sel ketiga).

Contoh

Katakan kita mempunyai grid dengan tiga elemen anak. Mari letakkan mereka supaya elemen pertama mengambil 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 tetapkan blok keempat untuk mengambil 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 Amali

Letakkan semua elemen dan laksanakan penggabungan baris seperti dalam contoh berikut: