Sifat grid-row-start

Sifat grid-row-start menetapkan kedudukan permulaan elemen dalam grid mengikut baris. Nilai untuk sifat ini boleh menjadi nombor positif atau negatif. Jika kita menetapkan nombor positif, maka kedudukan permulaan elemen dikira dari atas ke bawah. Apabila nombor negatif dinyatakan, elemen akan disusun dalam urutan terbalik, iaitu dari bawah ke atas.

Sintaks

selector {
	grid-row-start: nombor positif atau negatif;
}

Contoh

Mari tetapkan kedudukan permulaan untuk elemen dalam grid:

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

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Contoh

Sekarang mari kita nyatakan nombor negatif dalam sifat grid-row-start. Sekarang elem3 akan menduduki baris paling atas, manakala elem1 - paling bawah:

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

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Contoh

Mari kita buat agar blok pertama menduduki dua baris. Untuk ini, kita perlu menggabungkan sifat grid-row-start dan grid-row-end:

<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-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

Contoh

Sekarang mari kita tetapkan tiga baris untuk blok keempat:

<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-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

Lihat juga

sifat grid-row-end,
yang menetapkan kedudukan akhir elemen dalam grid mengikut baris
sifat grid-row,
yang menetapkan kedudukan permulaan dan akhir elemen dalam grid mengikut baris
sifat grid-template-rows,
yang menetapkan kuantiti dan lebar baris dalam grid
sifat grid-auto-rows,
yang menetapkan kuantiti dan lebar baris dalam grid tersirat