Omadus column-gap

Omadus column-gap määrab vahemaa veergude vahel mitmeveerulises tekstis, samuti vahemaa veergude vahel võrgus (grid). Omaduse väärtuseks võivad olla mis tahes mõõtühikud või märksõna normal (vaikimisi), mille puhul brauser valib ise optimaalse vahemaa veergude vahel.

Süntaks

cssvalija {
  column-gap: väärtus;
}

Näide

Selles näites on määratud veergude arv column-count (3 tükki) ja nendevaheline vahe column-gap väärtusega 50px. Veergude laius valitakse automaatselt nii, et see vastaks nendele tingimustele (veergude arv ja vahemaa nende vahel):

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

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

Результат:

Näide . Väärtus normal

Selles näites on määratud veeru laius column-width väärtusega 150px, nende arv column-count on seatud väärtusele auto, ja nendevaheline vahe column-gap on väärtusel normal. Seega valib brauser ise vajaliku veergude arvu ja nendevahelise vahe (kuid nende laius on 150px):

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

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

Результат:

Näide

Määrame vahemaa veergude vahel võrgus (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;
}

Результат:

Näide

Ja nüüd määrame vahemaa veergude vahel %:

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

Результат:

Vaata ka