Thuộc tính grid-row-end

Thuộc tính grid-row-end xác định vị trí kết thúc của một phần tử trong lưới (grid) theo các 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-end: số dương hoặc số âm;
}

Ví dụ

Hãy đặt vị trí kết thúc 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;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

Ví dụ

Hãy làm cho khối đầu tiên chiếm hai hàng:

<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 ba hàng cho khối thứ tư:

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

Ví dụ

Và bây giờ hãy chỉ định các số âm trong các thuộc tính grid-row-start và grid-row-end. 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Xem thêm

thuộc tính grid-row-start,
xác định vị trí bắt đầu của phần tử trong lưới theo các 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 các 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