Свойство gap: промежутки
Как задавать расстояние между элементами Grid и Flexbox без лишних крайних отступов.
Как это работает
gap создаёт промежутки между строками и колонками в поддерживающих его моделях раскладки. Во Flexbox и Grid это удобнее одинаковых margin на каждом потомке: по внешнему краю контейнера не появляется дополнительный отступ.
Одно значение применяется к обеим осям, два задают row-gap и column-gap. В flex-раскладке направление рядов зависит от flex-direction. Сам gap не включает flex или grid — модель задаётся отдельно.
Пример в интерфейсе
.tags { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.tags span { padding: 8px 12px; background: #eaf4ee; border-radius: 6px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| gap: 12px | Одинаковые промежутки. |
| gap: 12px 24px | Между строками 12px, колонками 24px. |
| row-gap | Промежуток между рядами. |
| column-gap | Промежуток между колонками. |
На что обратить внимание
Не удивляйтесь, если gap ничего не меняет в обычном блочном контейнере. Проверьте display и модель раскладки.
Проверьте на практике
Включите flex-wrap и добавьте пять кнопок. Уменьшите ширину: расстояния должны сохраниться и между строками.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.