Thuộc tính grid-row-start

Thuộc tính grid-row-start xác định vị trí bắt đầu của một phần tử trong lưới (grid) theo hàng. Giá trị của thuộc tính có thể là một số dương hoặc số âm. Nếu chúng ta đặt một số dương, thì vị trí bắt đầu của phần tử được tính từ trên xuống dưới. Khi chỉ định một số âm, phần tử sẽ được sắp xếp theo thứ tự ngược lại, tức là từ dưới lên trên.

Cú pháp

bộ chọn {
	grid-row-start: số dương hoặc số âm;
}

Ví dụ

Hãy đặt vị trí bắt đầu cho các phần tử trong lưới:

<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;
}

Ví dụ

Bây giờ hãy chỉ định số âm trong thuộc tính grid-row-start. Bây giờ elem3 sẽ chiếm hàng trên cùng, còn elem1 - hàng dưới cùng:

<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;
}

Ví dụ

Hãy làm cho khối đầu tiên chiếm hai hàng. Để làm điều này, chúng ta cần kết hợp thuộc tính grid-row-start và 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;
}

Ví dụ

Bây giờ hãy gán cho khối thứ tư ba hàng:

<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;
}

Xem thêm

thuộc tính grid-row-end,
xác định vị trí kết thúc của phần tử trong lưới theo hàng
thuộc tính grid-row,
xác định vị trí bắt đầu và kết thúc của phần tử trong lưới theo hàng
thuộc tính grid-template-rows,
xác định số lượng và chiều rộng của các hàng trong lưới
thuộc tính grid-auto-rows,
xác định số lượng và chiều rộng của các hàng trong lưới ngầm định