gap: отступы между элементами

gap — универсальное свойство для задания отступов между элементами в Flexbox и Grid-контейнерах; заменяет устаревший grid-gap и работает без отступов по внешним краям.

Зачем нужно

До gap для создания равных отступов между элементами использовались margin с костылём-компенсацией на родителе. gap решает задачу одним свойством: отступы только между элементами, без внешних краёв, без хаков. Поддерживается в Flexbox (Chrome 84+) и Grid.

Где используется

  • Отступы между кнопками в toolbar (flex)
  • Отступы между карточками в сетке (grid)
  • Отступы в формах между полями
  • Вертикальные отступы в колонках

Синтаксис

.container {
  gap: 16px;         /* row-gap и column-gap = 16px */
  gap: 16px 24px;    /* row-gap=16px, column-gap=24px */
  row-gap: 16px;     /* только строки */
  column-gap: 24px;  /* только колонки */
}

gap в Flexbox

/* Горизонтальные отступы между кнопками */
.btn-group {
  display: flex;
  gap: 8px;
}

/* Вертикальная форма */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

<div class="btn-group">
  <button>Сохранить</button>
  <button>Отмена</button>
  <button>Удалить</button>
</div>

gap в Grid

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Разные отступы по строкам и колонкам */
.table {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  row-gap: 4px;
  column-gap: 16px;
}

gap vs margin: практическая разница

/* С gap — чисто, без внешних отступов */
.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* С margin — нужна компенсация */
.list > * + * {
  margin-top: 12px;
  /* или: .list > * { margin-bottom: 12px } + убрать у последнего */
}

gap не добавляется к краям контейнера

[item1] [gap] [item2] [gap] [item3]
         ↑                   ↑
  между элементами, но не снаружи

Для внешних отступов используйте padding на контейнере:

.grid {
  display: grid;
  gap: 16px;
  padding: 24px; /* внешние отступы — отдельно */
}

Частые ошибки

  1. gap на обычном block-контейнере — gap работает только при display: flex, grid и их строчных вариантах
  2. Ожидание внешних отступов — gap не даёт отступов у краёв; для этого нужен padding
  3. Поддержка gap в Flexbox — старые браузеры (до Chrome 84, Safari 14.1) не поддерживают gap в Flexbox; для Flexbox-только-проектов проверьте caniuse

Поддержка браузеров

  • Grid: Chrome 57+, Firefox 52+, Safari 10.1+
  • Flexbox: Chrome 84+, Firefox 63+, Safari 14.1+

Связанные темы

Ресурсы