Thuộc tính column-gap

Thuộc tính column-gap đặt khoảng cách giữa các cột trong văn bản nhiều cột, cũng như khoảng cách giữa các cột trong grid. Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào hoặc từ khóa normal (mặc định), trong đó trình duyệt tự chọn khoảng cách tối ưu giữa các cột.

Cú pháp

bộ chọn {
	column-gap: giá trị;
}

Ví dụ

Trong ví dụ này, số lượng cột column-count (3 cái) và khoảng cách giữa chúng column-gap là 50px. Còn chiều rộng cột sẽ tự động được điều chỉnh để đáp ứng các điều kiện này (số lượng cột và khoảng cách giữa chúng):

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

Ví dụ . Giá trị normal

Trong ví dụ này, chiều rộng cột column-width là 150px, số lượng của chúng column-count được đặt thành giá trị auto, còn khoảng cách column-gap giữa chúng - là giá trị normal. Như vậy, trình duyệt sẽ tự chọn số lượng cột cần thiết và khoảng cách giữa chúng (nhưng chiều rộng của chúng sẽ là 150px):

<div id="elem">
	some long text
</div>

#elem {
	column-gap: normal;
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

Ví dụ

Hãy đặt khoảng cách giữa các cộ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;
	column-gap: 10px;
	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;
}

Ví dụ

Bây giờ hãy đặt khoảng cách giữa các cột theo %:

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

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

Xem thêm

thuộc tính column-width,
đặt chiều rộng cột
thuộc tính column-count,
đặt số lượng cột
thuộc tính gap,
đặt khoảng cách giữa các phần tử trong grid
thuộc tính row-gap,
đặt khoảng cách giữa các hàng trong grid