CSS свойство column-gap

Определение и применение

Свойство column-gap задаёт промежутки между столбцами Grid, колонками текста или соответствующими элементами и линиями Flexbox.

Промежуток создаётся только между соседними дорожками, линиями или элементами; отступа по внешним краям контейнера он не добавляет. Видимое расстояние может увеличиться из-за margin или распределения свободного места.

Во Flexbox с row свойство column-gap разделяет элементы внутри линии, а row-gap — линии. При column роли меняются: row-gap разделяет элементы, column-gap — колонки.

Проценты допустимы и относятся к соответствующему размеру области содержимого контейнера. При неопределённом размере результат зависит от вида раскладки; для обычных промежутков удобнее длины.

Связанные свойства: align-items, justify-content.

Промежутки между дорожками: row-gap: 12px; column-gap: 24px;. По внешнему краю промежутка нет.
123456

Попробуйте значения column-gap

Меняется промежуток между колонками текста.

Значение свойства

column-gap: 0

HTML и CSS примера
HTML
<div class="stage demo-target">
  <p>
    Колонки распределяют длинный текст по доступному пространству. Читатель
    движется сверху вниз, затем переходит к следующей колонке.
  </p>
  <h4>Заголовок</h4>
  <p>
    Размер колонок и промежутки влияют на длину строк. Разделительная линия
    рисуется в промежутке.
  </p>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  height: 230px;
  overflow: auto;
  column-count: 2;
  column-rule: 2px solid #245a85;
  font-size: 14px;
  column-gap: 0;
}
p {
  margin: 0 0 12px;
}
h4 {
  margin: 12px 0;
}

Поддержка браузерами

Спецификации: CSS gaps-1, CSS grid, CSS multicol

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.column-gap
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
column-gap✓1✓12✓1.5✓11.1✓3✓18✓4✓11.1✓2✓1.0✓4.4✓2
В flex-контейнере✓84✓84✓63✓70✓14.1✓84✓63✓60✓14.5✓14.0✓84✓14.5
В grid-контейнере✓66✓16✓61✓53✓12✓66✓61✓47✓12✓9.0✓66✓12
В многоколоночном контейнере✓50✓12✓52✓37✓10✓50✓52✓37✓10✓5.0✓50✓10
calc() values✓66✓16✓61✓53✓12.1✓66✓61✓47✓12.2✓9.0✓66✓12.2
&lt;percentage&gt; values✓66✓16✓61✓53✓12✓66✓61✓47✓12✓9.0✓66✓12
normal✓1✓12✓1.5✓11.1✓3✓18✓4✓11.1✓2✓1.0✓4.4✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
column-gap: normal | <length-percentage [0,∞]>;

/* Глобальные значения */
column-gap: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. Квадратные скобки группируют варианты; внутри типа задают допустимый диапазон. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript
element.style.columnGap = "50px";

Начальное значение свойства

normal.

Значения свойства

Значения column-gap
Значение Описание
normal В Grid и Flexbox соответствует нулю; column-gap: normal в многоколоночной раскладке соответствует 1em.
<length-percentage> Неотрицательная длина или процент. Ноль допустим; отрицательные значения недопустимы.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства column-gap устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Box Alignment — спецификация column-gap.

Наследуется

Нет.

Анимируемое

Как длина или процент при совместимых значениях; normal переключается дискретно.

Примеры, попробуйте сами

Многоколоночный текст

Измените 32px на 8px: промежутки между колонками уменьшатся.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.sample {
    font-size: 14px;
}
p {
    margin-top: 0;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Многоколоночный текст</title>
  </head>
  <body>
    <div class="sample">
      <p>Первый абзац. Колонки делят текст на вертикальные полосы и помогают сравнить ширину дорожек.</p>
      <h3 class="target">Подзаголовок</h3>
      <p>Второй абзац. Измените учебный CSS и посмотрите, как браузер перераспределит содержимое между колонками.</p>
      <p>Третий абзац. Длина текста и размеры контейнера влияют на результат раскладки.</p>
    </div>
  </body>
</html>
style.css
CSS
.sample {
    column-count: 2;
    column-gap: 32px;
}

Промежутки в Grid и Flexbox

В обоих контейнерах column-gap задаёт промежуток 24px. Измените его на 0 или 40px. Снаружи контейнера дополнительный отступ не появляется.

base.css
CSS
.grid > div,
.flex > div {
    background: #dceaff;
    outline: 1px solid;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Промежутки в Grid и Flexbox</title>
  </head>
  <body>
    <h3>Grid</h3>
    <div class="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    <h3>Flexbox</h3>
    <div class="flex">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>
style.css
CSS
.grid {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    column-gap: 24px;
}
.flex {
    display: flex;
    column-gap: 24px;
}
.flex > div {
    width: 50px;
}