Својството column-gap

Својството column-gap го одредува растојанието помеѓу колоните во повеќеколонски текст, како и растојанието помеѓу столбовите во грид. Вредноста на својството се сите единици за димензии или клучен збор normal (по стандард), при што прелистувачот сам го одбира оптималното растојание помеѓу колоните.

Синтакса

cssселектор {
  column-gap: вредност;
}

Пример

Во овој пример е наведен бројот на колони 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;
}

Результат:

Погледнете ги и