gap

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

• column-gap
• row-gap

Это свойство задаётся значением для <'row-gap'>, за которым необязательно следует значение для <'column-gap'>. Если <'column-gap'> опущено, оно устанавливается в такое же значение, как <'row-gap'>. И <'row-gap'>, и <'column-gap'> могут быть заданы как <length> или <percentage>.

<length>

Устанавливает ширину промежутка между столбцами, элементами гибкой компоновки, линиями гибкой компоновки и линиями сетки.

<percentage>

Устанавливает ширину промежутка между столбцами, элементами гибкой компоновки, линиями гибкой компоновки и линиями сетки относительно размера элемента.

Это свойство определяет промежутки между столбцами в многоколоночной компоновке CSS, между элементами и линиями гибкой компоновки в гибкой компоновке CSS и между строками и столбцами в сетке CSS.

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

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

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

В контейнерах многоколоночной компоновки первое значение определяет отступ между столбцами. Разделительная линия может быть добавлена к пустому пространству, используя свойство column-rule-style или краткое свойство column-rule.

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

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

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

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

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

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

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

Результат

Если у контейнера задан фиксированный размер, то вычисления процентных значений отступов основаны на размере контейнера. Таким образом, поведение отступов согласованно во всех компоновках. В следующем примере два контейнера, один с компоновкой сетки, а другой с компоновкой гибкой компоновки. В обоих контейнерах пять красных элементов размером 20x20px. Оба контейнера явно заданы высотой 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>

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

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

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

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

В случае гибкой компоновки интервал в процентах всегда имеет нулевое значение.

• row-gap
• column-gap
• Основные понятия компоновки сетки: отступы
• Модуль CSS box alignment
• Модуль CSS flexible box layout
• Модуль CSS grid layout
• Модуль CSS multi-column layout