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

Свойство column-gap CSS задаёт размер промежутка (желоба) между столбцами элемента в многоколоночных, гибких и сеточных макетах.

Попробуйте

column-gap: 0;

column-gap: 10%;

column-gap: 1em;

column-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

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

/* <length-percentage> value */
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: calc(3% - 6px);

/* <line-width> keyword value */
column-gap: thin;
column-gap: medium;
column-gap: thick;

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

Значения

Для этого свойства указывается одно значение из следующего списка:

normal

Для многоколоночного макета задаёт промежуток 1em; в остальных случаях — 0. Это значение по умолчанию.

<line-width>

Задаёт размер промежутка с помощью ключевых слов thin, medium или thick либо положительного значения <length>.

<length-percentage>

Задаёт неотрицательное значение <length> или <percentage>. Проценты отсчитываются относительно размера по строчной оси области содержимого.

Описание

Свойство column-gap задаёт размер промежутка между столбцами элемента. Свойство определяет фиксированный по размеру желоб между элементами контейнера, разделяющий блоки вдоль строчной оси контейнера. Отрицательные значения недопустимы. По умолчанию ширина промежутков между столбцами в многоколоночных контейнерах равна 1em, тогда как между столбцами сетки, элементами гибкого контейнера или его строками промежуток не добавляется.

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

В промежутке между столбцами может отображаться разделитель в виде декорации промежутка. Чтобы провести линию между столбцами, используйте свойство column-rule или сокращённое свойство rule. Линия проходит посередине промежутка, но не влияет на его размер.

Свойство column-gap, как и свойство row-gap, также можно задать с помощью сокращённого свойства gap. Оно задаёт row-gap и column-gap в одном объявлении именно в таком порядке.

Свойство column-gap заменило свойство grid-column-gap, изначально определённое в CSS-макете сетки для создания промежутков между столбцами сетки. Теперь grid-column-gap является псевдонимом column-gap.

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

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

column-gap = 
  normal |
  <length-percentage>

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

Примеры

Гибкий макет

В этом примере показано, как использовать свойство column-gap для создания горизонтального пространства между соседними элементами гибкого контейнера.

HTML

В контейнерный элемент включены шесть элементов:

<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Мы задаём свойству display значение flex, а свойству flex-flow — значение row wrap, чтобы создать гибкий контейнер со строками элементов. Благодаря этому элементы при необходимости переносятся на новые строки. Для каждого гибкого элемента задаётся базовый размер 200px или 300px.

С помощью свойства column-rule мы задаём разделительную линию. Значение column-gap для гибкого контейнера устанавливается равным 20px, создавая промежуток шириной 20px между соседними элементами каждой строки. Разделительная линия проходит посередине промежутка.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  column-rule: 1px solid magenta;

  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  height: 35px;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Результат

Чтобы задать вертикальное пространство между строками гибкого контейнера, укажите ненулевое значение свойства row-gap. При необходимости задайте оба свойства — row-gap и column-gap — с помощью сокращённого свойства gap.

Сеточный макет

В этом примере показано использование свойства column-gap со значением <percentage> в сеточном макете. Также показано, что размер column-gap не зависит от размера разделительной линии столбцов.

HTML

В контейнерный элемент включены семь элементов:

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

CSS

Мы задаём свойству display значение grid, свойству width — значение 400px, а свойству grid-template-columns — значение repeat(3, 1fr), чтобы создать сеточный контейнер шириной 400px с тремя столбцами и нужным количеством строк. Высота каждой строки составляет 100px, как задано свойством grid-auto-rows. У нечётных элементов сетки фон цвета lime, а чётные элементы полупрозрачны.

Мы также задали очень широкую полупрозрачную column-rule, чтобы показать, что линия отрисовывается позади содержимого, а её ширина не влияет на размер промежутка. Значение column-gap установлено равным 5%, благодаря чему ширина промежутка составляет 20px.

#grid {
  display: grid;
  width: 400px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  column-rule: 30px solid #ff00ff33;

  column-gap: 5%;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
#grid > div:nth-of-type(even) {
  background-color: #00ff0033;
}

@layer no-support {
  @supports not (column-gap: 5%) {
    body::before {
      content: "Your browser doesn't support percent values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

Разделительная линия столбцов шире промежутка и видна только там, где расположенные поверх неё элементы полупрозрачны.

Многоколоночный макет

В этом примере показано использование свойства column-gap со значением-ключевым словом <line-width> в многоколоночном макете.

HTML

<p class="content-box">
  This is some multi-column text with a thin column gap created with the CSS
  `column-gap` property. The `normal` default value for the `column-gap`
  property in multi-col layout is 1em.
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: thin;
}

@layer no-support {
  @supports not (column-gap: thick) {
    body::before {
      content: "Your browser doesn't support the <line-width> keyword values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

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

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

См. также

• row-gap
• gap
• column-rule
• rule
• Основы сеточного макета: желоба
• Стилизация столбцов
• Модуль промежутков CSS