column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Свойство CSS column-gap задаёт отступ между колонками.

Интерактивный пример

Изначально свойство появилось в многоколоночной раскладке. Позже оно перекочевало в другие методы раскладки, и теперь column-gap определено в спецификации Box Alignment. А значит может использоваться в многоколоночной, флексбокс- и грид-раскладках.

Обратите внимание, что grid-column-gap является псевдонимом для этого свойства.

Синтаксис

css
/* Keyword value */
column-gap: normal;

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

Свойство column-gap может быть задано одним из значений, перечисленных ниже.

Значения

normal

Между колонками используется стандартное расстояние, определённое браузером. В случае многоколоночной раскладки это будет 1em. Для всех остальных типов раскладки это значение равно нулю.

<length>

Размер промежутка между колонками, определяемое единицам измерения длины. Значение <length> должно быть положительным.

<percentage>

Размер промежутка между колонками, указанный в процентах. Значение <percentage> должно быть положительным.

Формальное определение

Начальное значениеnormal
Применяется кmulti-column elements, flex containers, grid containers
Наследуетсянет
Процентыотносятся к соответствующему размеру области содержимого
Обработка значенияas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeдлина, проценты или calc();

Формальный синтаксис

column-gap = 
normal |
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

Примеры

Флексбокс-раскладка

HTML

html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Результат

Грид-раскладка

HTML

html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Результат

Многоколоночная раскладка

HTML

html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

css
.content-box {
  column-count: 3;
  column-gap: 40px;
}

Результат

Спецификации

Specification
CSS Box Alignment Module Level 3
# column-row-gap
CSS Grid Layout Module Level 2
# gutters
CSS Multi-column Layout Module Level 1
# column-gap

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-gap
Supported in Flex Layout
Supported in Grid Layout
Supported in Multi-column Layout
calc() values
<percentage> values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

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