Sifat column-gap

Sifat column-gap menetapkan jarak antara lajur dalam teks berbilang lajur, dan juga jarak antara lajur dalam grid. Nilai sifat adalah sebarang unit untuk saiz atau kata kunci normal (lalai), di mana pelayar sendiri memilih jarak optimum antara lajur.

Sintaks

csspemilih {
  column-gap: nilai;
}

Contoh

Dalam contoh ini, bilangan lajur ditentukan column-count (3 keping) dan jarak antara mereka column-gap sebanyak 50px. Dan lebar lajur akan secara automatik disesuaikan untuk memenuhi syarat-syarat ini (bilangan lajur dan jarak antara mereka):

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 lajur ditentukan column-width sebanyak 150px, bilangan mereka column-count adalah dalam nilai auto, dan jarak column-gap antara mereka - dalam nilai normal. Oleh itu, pelayar sendiri akan memilih bilangan lajur yang diperlukan dan jarak antara mereka (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 tetapkan jarak antara lajur 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 tetapkan jarak antara lajur 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