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

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

ไวยากรณ์

cssselector {
  column-gap: value;
}

ตัวอย่าง

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

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

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

Результат:

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

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม