Properti grid-row-start

Properti grid-row-start mengatur posisi awal elemen dalam grid berdasarkan baris. Nilai properti dapat berupa angka positif atau negatif. Jika kita memberikan angka positif, maka posisi awal elemen dihitung dari atas ke bawah. Jika menetapkan angka negatif, elemen akan ditempatkan dalam urutan terbalik, yaitu dari bawah ke atas.

Sintaks

selektor {
	grid-row-start: angka positif atau negatif;
}

Contoh

Mari kita tetapkan posisi awal untuk elemen-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 gunakan angka negatif dalam properti grid-row-start. Sekarang elem3 akan menempati baris paling atas, sedangkan elem1 - baris 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 blok pertama menempati dua baris. Untuk ini kita perlu mengkombinasikan properti 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 blok keempat untuk menempati 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-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

properti grid-row-end,
yang mengatur posisi akhir elemen dalam grid berdasarkan baris
properti grid-row,
yang mengatur posisi awal dan akhir elemen dalam grid berdasarkan baris
properti grid-template-rows,
yang mengatur jumlah dan lebar baris dalam grid
properti grid-auto-rows,
yang mengatur jumlah dan lebar baris dalam grid implisit