Savybė column-gap

Savybė column-gap nustato atstumą tarp stulpelių daugiacilpiame tekste, taip pat atstumą tarp stulpelių garde. Savybės reikšmė gali būti bet kokie dydžio vienetai arba raktažodis normal (numatytasis), kai naršyklė pati parenka optimalų atstumą tarp stulpelių.

Sintaksė

cssselektorius {
  column-gap: reikšmė;
}

Pavyzdys

Šiame pavyzdyje nurodytas stulpelių skaičius column-count (3 vienetai) ir tarpas tarp jų column-gap 50px. O stulpelių plotis automatiškai bus parinktas taip, kad tenkintų šias sąlygas (stulpelių skaičiui ir atstumui tarp jų):

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

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

Результат:

Pavyzdys . Reikšmė normal

Šiame pavyzdyje nurodytas stulpelio plotis column-width 150px, jų skaičius column-count yra reikšmėje auto, o tarpas column-gap tarp jų - reikšmėje normal. Taigi, naršyklė pati pasirinks reikiamą stulpelių skaičių ir tarpą tarp jų (bet jų plotis bus 150px):

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

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

Результат:

Pavyzdys

Nustatykime atstumą tarp stulpelių garde:

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

Результат:

Pavyzdys

Dabar nustatykime atstumą tarp stulpelių %:

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

Результат:

Taip pat žiūrėkite