Thuộc tính grid-column

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

Cú pháp

bộ chọn {
	grid-column: vị trí bắt đầu / vị trí kết thúc;
}

Ví dụ

Hãy đặt cho các phần tử trong grid vị trí bắt đầu và kết thúc:

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

Ví dụ

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

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

Ví dụ

Bây giờ hãy làm sao 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: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}
#elem4 {
	grid-column: 1 / 4;
}

Ví dụ

Khi các cột được chiếm bởi các phần tử liền kề chồng lấn lên nhau, mỗi phần tử tiếp theo sẽ bị đẩy xuống một hàng. Hãy sử dụng đặc điểm này để làm sao 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: 1 / 4;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 1 / 2;
}
#elem4 {
	grid-column: 3 / 4;
}

Ví dụ

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

<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, còn khối thứ hai - hai hàng và hai cột, và 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-row,
xác định vị trí bắt đầu và kết thúc của phần tử trong grid theo các hàng
thuộc tính grid-column-start,
xác định vị trí bắt đầu của phần tử trong grid theo các cột
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-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