Properti column-gap

Properti column-gap mengatur jarak antara kolom dalam teks multi-kolom, serta jarak antara kolom dalam grid. Nilai properti dapat berupa satuan ukuran apa pun atau kata kunci normal (secara default), di mana browser secara otomatis memilih jarak optimal antara kolom.

Sintaksis

cssselektor {
  column-gap: nilai;
}

Contoh

Dalam contoh ini, jumlah kolom ditentukan oleh column-count (3 buah) dan jarak antaranya column-gap sebesar 50px. Lebar kolom akan secara otomatis disesuaikan untuk memenuhi kondisi ini (jumlah kolom dan jarak antaranya):

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

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

Результат:

Contoh . Nilai normal

Dalam contoh ini, lebar kolom ditentukan oleh column-width sebesar 150px, jumlahnya column-count diatur ke nilai auto, dan jarak column-gap antaranya - ke nilai normal. Dengan demikian, browser sendiri akan memilih jumlah kolom yang diperlukan dan jarak antaranya (tetapi lebarnya akan 150px):

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

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

Результат:

Contoh

Mari atur jarak antara kolom dalam grid:

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

Результат:

Contoh

Dan sekarang mari atur jarak antara kolom dalam %:

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

Результат:

Lihat juga