# Свойство column-gap

Свойство `column-gap` задает расстояние между колонками в многоколоночном тексте, а также расстояние между столбцами в гриде. Значением свойства служат любые единицы для размеров либо ключевое слово `normal` (по умолчанию), при котором браузер сам подбирает оптимальное расстояние между колонками.

## Синтаксис

`селектор { column-gap: значение; }`

## Пример

В данном примере указано количество колонок `column-count` (`3` штуки) и промежуток между ними `column-gap` в `50px`. А ширина колонок автоматически подберется так, чтобы удовлетворить этим условиям (количеству колонок и расстоянию между ними):

`<div id="elem"> некий длинный текст </div>` `#elem { column-count: 3; column-gap: 50px; text-align: justify; }`

:

## Пример . Значение normal

В данном примере указана ширина колонки `column-width` в `150px`, их количество `column-count` стоит в значении `auto`, а промежуток `column-gap` между ними - в значении `normal`. Таким образом, браузер сам подберет необходимое количество колонок и промежуток между ними (но их ширина будет `150px`):

`<div id="elem"> некий длинный текст </div>` `#elem { column-gap: normal; column-count: auto; column-width: 150px; text-align: justify; }`

:

## Пример

Давайте зададим расстояние между столбцами в гриде:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#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; }`

:

## Пример

А теперь давайте зададим расстояние между столбцами в `%`:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#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; }`

:

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

- свойство `column-width`,
  которое задает ширину колонки
- свойство `column-count`,
  которое задает количество колонок
- свойство `gap`,
  которое задает расстояние между элементами в гриде
- свойство `row-gap`,
  которое задает расстояние между рядами в гриде

← →
↑
en ru