gap

Пример

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1.5rem;
}

.grid div {
  padding: 0.5rem;
  border: 1px solid;
}

Синтаксис

gap: <'row-gap'> <'column-gap'>?;

Начальное значение

normal

Применяется к

флекс-контейнерам, грид-контейнерам и многоколоночным контейнерам

Наследуется

нет

Анимируется

как длина или процент

Вычисляемое значение

как у отдельных свойств row-gap и column-gap

Одно значение задаёт оба промежутка. Два значения — сначала между строками (row-gap), потом между колонками (column-gap).

gap: 1rem; /* и между строками, и между колонками */
gap: 1rem 2rem; /* строки | колонки */

Значения

normal

Во флексе и сетке — ноль, в многоколоночной вёрстке — 1em. Значение по умолчанию.

Длина

Промежуток в любых единицах: 16px, 1rem.

Процент

Процент от размера контейнера по соответствующей оси.

Как понять

До gap расстояние между элементами делали внешними отступами каждого элемента, а потом убирали лишний отступ у первого или последнего — через :last-child или отрицательный margin контейнера. gap рисует промежуток только между соседями, поэтому ничего убирать не нужно, и при переносе строк промежутки остаются ровными.

Промежуток — это пустое место, а не элемент: у него нет фона и рамки. Если нужна линия между колонками текста, для многоколоночной вёрстки есть column-rule.

Примеры

Флекс с переносом

Промежутки одинаковые и по горизонтали, и между перенесёнными строками:

<ul class="tags">
  <li>css</li>
  <li>flexbox</li>
  <li>grid</li>
  <li>вёрстка</li>
  <li>адаптивность</li>
  <li>анимации</li>
</ul>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 16rem;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.25rem 0.75rem;
  background: #eef;
}

Колонки текста

В многоколоночной вёрстке gap задаёт расстояние между колонками:

<p class="columns">
  Колонки делят текст как в газете. Промежуток между ними задаёт gap, а линию — column-rule. Текст
  перетекает из одной колонки в другую автоматически.
</p>

.columns {
  columns: 2;
  gap: 2rem;
  column-rule: 1px solid silver;
}

Подсказки

• gap во флексе поддерживается всеми современными браузерами, но в очень старых версиях Safari (до 14.1) не работал. Если нужна их поддержка — используйте отступы.
• Процентный gap в контейнере с высотой auto по вертикали может считаться как ноль — задавайте вертикальный промежуток в длинах.
• Раньше свойство называлось grid-gap — старое имя работает как синоним, но в новом коде пишите gap.