คุณสมบัติ column-gap

คุณสมบัติ column-gap กำหนดระยะห่าง ระหว่างคอลัมน์ในข้อความหลายคอลัมน์ และระยะห่างระหว่างคอลัมน์ในกริด ค่าของคุณสมบัติคือ หน่วย วัดขนาด ใดๆ หรือคำสำคัญ normal (ค่าเริ่มต้น) ซึ่งเบราว์เซอร์จะ เลือกระยะห่างที่เหมาะสมระหว่าง คอลัมน์ด้วยตนเอง

ไวยากรณ์

selector {
	column-gap: value;
}

ตัวอย่าง

ในตัวอย่างนี้มีการระบุจำนวนคอลัมน์ column-count (3 คอลัมน์) และระยะห่างระหว่างพวกมัน column-gap ที่ 50px โดยความกว้างของคอลัมน์จะถูก ปรับโดยอัตโนมัติ เพื่อให้สอดคล้องกับ เงื่อนไขเหล่านี้ (จำนวนคอลัมน์และระยะห่าง ระหว่างพวกมัน):

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

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

ตัวอย่าง . ค่า normal

ในตัวอย่างนี้มีการระบุความกว้างของคอลัมน์ column-width ที่ 150px จำนวนของพวกมัน column-count ถูกตั้งเป็นค่า auto และระยะห่าง column-gap ระหว่างพวกมัน - เป็นค่า normal ดังนั้น เบราว์เซอร์จะ เลือกจำนวนคอลัมน์และ ระยะห่างระหว่างพวกมันที่จำเป็นด้วยตนเอง (แต่ความกว้างของพวกมันจะเป็น 150px):

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

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

ตัวอย่าง

มากำหนดระยะห่างระหว่าง คอลัมน์ในกริดกัน:

<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;
}

ตัวอย่าง

และตอนนี้มากำหนดระยะห่างระหว่าง คอลัมน์เป็น % กัน:

<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;
}

ดูเพิ่มเติม

คุณสมบัติ column-width,
ซึ่งกำหนดความกว้างของคอลัมน์
คุณสมบัติ column-count,
ซึ่งกำหนดจำนวนคอลัมน์
คุณสมบัติ gap,
ซึ่งกำหนดระยะห่างระหว่างองค์ประกอบในกริด
คุณสมบัติ row-gap,
ซึ่งกำหนดระยะห่างระหว่างแถวในกริด