gap (grid-gap): отступы между ячейками

gap (ранее grid-gap) — свойство Grid-контейнера, задающее отступы между строками и колонками сетки; не добавляется к внешним краям контейнера.

Зачем нужно

Вместо добавления margin к каждому grid-элементу достаточно одного gap на контейнере. Отступ применяется только между ячейками, а не по краям сетки — что решает классическую проблему margin с внешними элементами. gap работает и в Flexbox.

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

  • Отступы между карточками в Grid-сетке
  • Отступы между flex-элементами в навбаре
  • Вертикальные отступы между строками Grid

Синтаксис

.container {
  display: grid;

  gap: 16px;            /* row-gap и column-gap одинаковы */
  gap: 16px 24px;       /* row-gap column-gap */
  row-gap: 16px;        /* только между строками */
  column-gap: 24px;     /* только между колонками */
}

Примеры

Базовая сетка карточек

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* 24px между строками и колонками */
}

<div class="cards">
  <article>Карточка 1</article>
  <article>Карточка 2</article>
  <article>Карточка 3</article>
  <article>Карточка 4</article>
  <article>Карточка 5</article>
  <article>Карточка 6</article>
</div>

Разные отступы по осям

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  row-gap: 0;       /* строки без отступа */
  column-gap: 24px; /* между сайдбаром и контентом */
}

gap в Flexbox

.toolbar {
  display: flex;
  gap: 8px; /* отступы между кнопками */
}

<div class="toolbar">
  <button>Жирный</button>
  <button>Курсив</button>
  <button>Подчёркнутый</button>
</div>

gap vs margin

/* С gap — одно свойство, нет отступа по краям */
.grid {
  display: grid;
  gap: 16px;
}

/* Без gap — приходится убирать внешние отступы */
.grid > * {
  margin: 8px;
}
.grid {
  margin: -8px; /* компенсация */
}

Важно: gap не добавляется к краям

| col1 | 16px | col2 | 16px | col3 |
       ↑gap между колонками, но не снаружи

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

Устаревшие алиасы

/* Устаревшие — работают, но предпочтительнее gap */
grid-gap: 16px;        → gap: 16px
grid-row-gap: 16px;    → row-gap: 16px
grid-column-gap: 24px; → column-gap: 24px

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

  1. gap применён к не-flex/grid контейнеру — gap работает только при display: flex, grid, inline-flex, inline-grid
  2. Ожидание отступов по краям — gap не добавляет отступы к внешним краям; добавьте padding на контейнер
  3. grid-gap в новом коде — работает, но является устаревшим алиасом; используйте gap

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

Ресурсы