Thuộc tính grid-row

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 grid hoặc lưới theo hàng. Giá trị của thuộc tính có thể là số dương hoặc số âm, được chỉ định thông qua dấu gạch chéo. Số đầu tiên biểu thị vị trí bắt đầu của phần tử, số thứ hai - vị trí kết thúc. Nếu giá trị được đặt là số dương, thì vị trí của phần tử được tính từ trên xuống dưới. Khi chỉ định 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: vị trí bắt đầu / vị trí kết thúc;
}

Ví dụ

Hãy đặt vị trí bắt đầu và kết thúc cho các phần tử trong 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;
	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;
}

Ví dụ

Bây giờ hãy chỉ định số âm trong thuộc tính grid-row:

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

#parent {
	display: grid;
	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;
}

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: 1 / 3; /* hai hàng */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Ví dụ

Bây giờ hãy chỉ định 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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Ví dụ

Kết hợp các thuộc tính grid-row và grid-column:

<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 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Ví dụ

Bây giờ hãy làm sao cho khối thứ nhất và thứ năm chiếm toàn bộ hàng, khối thứ hai - hai hàng và hai cột, còn khối thứ ba và thứ tư - một hàng và hai cộ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 id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Xem thêm

thuộc tính grid-column,
xác định vị trí bắt đầu và kết thúc của phần tử trong grid theo cột
thuộc tính grid-row-start,
xác định vị trí bắt đầu của phần tử trong grid theo hàng
thuộc tính grid-row-end,
xác định vị trí kết thúc của phần tử trong grid theo hàng