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

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

Попробуйте

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<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;
}

Составные свойства

Это свойство является сокращением для следующих свойств CSS:

• row-gap
• column-gap

Синтаксис

/* One value */
gap: normal;
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;
gap: 16%;
gap: 100%;
gap: thick;
gap: calc(10% + 20px);

/* Two values */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;
gap: 16% 100%;
gap: 21px 82%;
gap: normal thin;
gap: thin thick;
gap: calc(20px + 10%) calc(10% - 5px);
gap: calc(20px + 10%) medium;

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

Значения

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

normal

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

<line-width>

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

<length-percentage>

Задаёт промежуток как неотрицательное значение <length> или <percentage>.

Описание

Свойство gap задаёт промежутки между столбцами и строками. Результат зависит от того, является ли контейнер сеточным, flex-контейнером или контейнером многоколоночной раскладки.

Сокращение принимает одно или два значения. Одно значение задаёт как row-gap, так и column-gap. При указании двух значений сначала задаётся row-gap, а затем column-gap. Для обоих подчинённых свойств значением по умолчанию является normal; однако если указать только одно значение, оно применяется к обоим.

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

Создаваемые промежутки образуют пустые области шириной или высотой, равной указанному размеру промежутка, подобно пустому элементу или дорожке. Видимое расстояние между элементами может отличаться от заданного значения gap, поскольку поля, внутренние отступы и распределение элементов при выравнивании могут увеличить расстояние между ними сверх значения, определяемого свойством gap.

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

В сеточных раскладках

В сеточной раскладке CSS свойство gap задаёт пространство между строками и столбцами. Если указаны два значения, первое задаёт промежуток между строками, а второе — между столбцами.

Процентные значения рассчитываются относительно размера области содержимого элемента-контейнера. Циклические процентные размеры при определении вкладов в внутренний размер разрешаются в ноль, но при раскладке содержимого разрешаются относительно области содержимого сеточного контейнера. В двух примерах ниже показаны процентные значения промежутков с явно заданным размером контейнера и неявным размером контейнера.

Положительные значения gap действуют так, как будто линии сетки имеют толщину: сеточная дорожка между двумя линиями сетки — это пространство между соответствующими промежутками. Если элемент сетки занимает несколько строк или столбцов, то при расчёте размеров дорожек промежуток рассматривается как дополнительная пустая дорожка фиксированного размера, равного заданному значению, добавляемая по направлению охвата. Например, если для сетки 3×3, состоящей из ячеек размером 100px на 100px, задано gap: 10px, то ширина элемента сетки, занимающего два вертикальных столбца, составит 210px. Если элемент занимает все три столбца, его ширина составит 320px.

Пространство между строками и столбцами сетки может быть больше значения свойства gap из-за пространства, добавленного между дорожками свойствами justify-content и align-content.

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

В ранних версиях спецификации CSS Grid это свойство называлось grid-gap. Для совместимости со старыми сайтами браузеры принимают grid-gap как псевдоним gap.

В flexbox

В flex-контейнерах свойство gap задаёт пространство между flex-элементами и flex-строками. То, задаёт ли первое значение промежуток между flex-элементами или между flex-строками, зависит от направления. Flex-элементы располагаются в строки или столбцы в зависимости от значения свойства flex-direction. Для строк (row (по умолчанию) или row-reverse) первое значение задаёт промежуток между flex-строками, а второе — между элементами в каждой строке. Если указано только одно значение, оно используется для обоих измерений.

Для столбцов (column или column-reverse) первое значение задаёт промежуток между flex-элементами внутри flex-строки, а второе — промежуток между flex-строками. И здесь, если указано только одно значение, оно используется для обоих измерений.

В многоколоночных раскладках

В многоколоночной раскладке CSS свойство задаёт промежутки между столбцами и строками столбцов. Первое значение задаёт промежуток между соседними столбцами, а второе — размер промежутка между строками столбцов, если свойство column-height создало несколько строк.

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

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

gap = 
  <'row-gap'> <'column-gap'>?

Примеры

Flex-раскладка

HTML

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

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

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

Результат

Сеточная раскладка

HTML

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

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

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

Результат

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

HTML

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

CSS

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

Результат

Процентное значение промежутка и явно заданный размер контейнера

Если для контейнера задан фиксированный размер, процентное значение промежутка рассчитывается относительно размера контейнера. Таким образом, поведение промежутка одинаково во всех раскладках. В следующем примере показаны два контейнера: один с сеточной раскладкой, другой — с flex-раскладкой. В каждом контейнере находятся пять красных дочерних элементов размером 20×20px. Для обоих контейнеров явно задана высота 200px с помощью height: 200px, а промежуток задан с помощью gap: 12.5% 0.

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #cccccc;
  width: 200px;
  flex-flow: column;
}

#grid {
  display: inline-grid;
  height: 200px;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  height: 200px;
  gap: 12.5% 0;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

Теперь изучите сеточный и flex-элементы с помощью вкладки «Инспектор» в инструментах веб-разработчика. Чтобы увидеть фактические промежутки, наведите курсор на теги <div id="grid"> и <div id="flex"> в инспекторе. Вы увидите, что в обоих случаях промежуток одинаков и составляет 25px.

Процентное значение промежутка и неявный размер контейнера

Если размер контейнера не задан явно, процентный промежуток ведёт себя по-разному в сеточной и flex-раскладках. В следующем примере высота контейнеров явно не задана.

<span>Grid</span>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<span>Flex</span>
<div id="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

body > div {
  background-color: #cccccc;
  width: 200px;
}

#grid {
  display: inline-grid;
  gap: 12.5% 0;
}

#flex {
  display: inline-flex;
  gap: 12.5% 0;
  flex-flow: column;
}

#grid > div,
#flex > div {
  background-color: coral;
  width: 20px;
  height: 20px;
}

В сеточной раскладке процентный промежуток не влияет на фактическую высоту сетки. Высота контейнера рассчитывается с использованием промежутка 0px, поэтому фактическая высота составляет 100px (20px × 5). Затем фактический процентный промежуток рассчитывается относительно высоты области содержимого и составляет 12.5px (100px × 12,5%). Промежуток применяется непосредственно перед отрисовкой. Поэтому высота сетки остаётся равной 100px, но сетка переполняется из-за процентного промежутка, добавленного непосредственно перед отрисовкой.

В flex-раскладке процентный промежуток всегда равен нулю.

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

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

См. также

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