Thuộc tính grid-column-end

Thuộc tính grid-column-end xác định vị trí kết thúc của phần tử trong grid hoặc lưới cho đến một cột nhất định. Giá trị của thuộc tính có thể là số dương hoặc số âm. Nếu chúng ta đặt số dương, thì vị trí kết thúc của phần tử được tính từ trái sang phả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ừ phải sang trái.

Điểm quan trọng của thuộc tính grid-column-end là số thứ tự của cột được chỉ định không được bao gồm trong vị trí kết thúc của phần tử - nếu chúng ta đặt số 3, thì phần tử sẽ chỉ chiếm cột thứ nhất và thứ hai.

Cú pháp

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

Ví dụ

Hãy xác định vị trí 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;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Ví dụ

Và bây giờ, hãy sử dụng thuộc tính grid-column-start để làm cho phần tử thứ nhất, thứ hai và thứ ba nằm trên hàng đầu tiên. Còn phần tử thứ tư chiếm toàn bộ hàng thứ hai:

<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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Ví dụ

Khi các cột bị chiếm bởi các phần tử lân cận chồng lên nhau, mỗi phần tử tiếp theo sẽ bị đẩy xuống một hàng thấp hơn. Hãy sử dụng đặc điểm này để làm cho phần tử thứ nhất nằm ở hàng đầu tiên, phần tử thứ hai - ở hàng thứ hai, còn phần tử thứ ba và thứ tư - ở hàng thứ ba:

<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;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Ví dụ

Và bây giờ hãy chỉ định số âm trong thuộc tính grid-column-end:

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

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: -4;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Xem thêm

thuộc tính grid-column-start,
xác định vị trí bắt đầu của phần tử trong grid theo cột
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-template-columns,
xác định số lượng và chiều rộng của các cột trong grid
thuộc tính grid-auto-columns,
xác định số lượng và chiều rộng của các cột trong grid ngầm định