Thuộc tính grid-column-start

Thuộc tính grid-column-start xác định vị trí bắt đầu của phần tử trong grid hoặc lưới theo các cột. 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í bắt đầu của phần tử được tính từ trái sang phải. Khi chỉ định số âm, phần tử sẽ được định vị theo thứ tự ngược lại, tức là từ phải sang trái.

Cú pháp

bộ chọn {
	grid-column-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 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-column-start: 1;
}
#elem2 {
	grid-column-start: 2;
}
#elem3 {
	grid-column-start: 3;
}

Ví dụ

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

<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-column-start: -1;
}
#elem2 {
	grid-column-start: -2;
}
#elem3 {
	grid-column-start: -3;
}

Ví dụ

Bây giờ chúng ta sử dụng thuộc tính grid-column-end để làm cho phần tử thứ nhất, thứ hai và thứ ba nằm ở 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ị chồng lấp bởi các phần tử liền kề, mỗi phần tử tiếp theo sẽ bị đẩy xuống một hàng dưới. Hãy tận dụng khả năng này để làm cho phần tử thứ nhất nằm ở hàng đầu, phần tử thứ hai - ở hàng thứ hai, còn phần tử thứ ba và thứ tư - chiếm 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;
}

Xem thêm

thuộc tính grid-column-end,
xác định vị trí kết thúc của phần tử trong grid theo các 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ác 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