Свойство 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;
}

Результат:

Смотрите также