CSS gap — проміжок між колонками і рядками grid та flex

CSS властивість gap задає проміжок між рядками та колонками у grid-, flex- і колонкових контейнерах. Це скорочення для row-gap і column-gap.

правити

Загальний опис

До появи gap відступи між картками робили через margin — і одразу отримували зайвий відступ по краях контейнера, який доводилось гасити через :last-child чи від'ємні маргіни.

gap працює інакше: він додає простір між елементами і не чіпає зовнішні краї. Одне значення — і сітка дихає рівно там, де треба.

Якщо задати два значення, перше піде на рядки, друге на колонки: gap: 2rem 1rem.

правити

Порада

У flex-контейнері gap заміняє весь набір хитрощів із margin і від'ємними відступами. Просто задай display: flex; gap: 1rem — і забудь про :last-child.

автор: NagarD правити

Нотатка

У flexbox gap з'явився пізніше, ніж у grid (Safari підтримує з 14.1). Якщо треба підтримка зовсім старих браузерів — доведеться лишити запасний варіант на margin.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість gap може отримувати 3 значень:

length

Фіксований проміжок (px, em, rem…).

автор: NagarD

правити

percentage

Проміжок у відсотках від розміру контейнера.

автор: NagarD

правити

normal

Типовий проміжок (1em для колонкового макета, 0 для решти).

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
gap	84+	63+	14.1+	70+	84+	-

Підтримка: мобільні переглядачі

Переглядач
gap	84+	yes	yes	14.5+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cards">
    <article>Картка 1</article>
    <article>Картка 2</article>
    <article>Картка 3</article>
</div>

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* 2rem між рядками, 1rem між колонками */
    gap: 2rem 1rem;
}

.cards article {
    padding: 1rem;
    background: #f4f4f4;
}