CSS Gap Decorations:
Полное руководство для веб-разработчиков

Введение

Долгие годы веб-разработчики использовали column-rule для создания элегантных линий между колонками в мультиколоночных макетах — но у CSS Grid и Flexbox не было аналога. Хотите тонкую линию между ячейками сетки или flex-элементами? Приходилось прибегать к границам, псевдоэлементам, box-shadow или трюкам с фоном. Каждое решение было хрупким, сложным в поддержке и ломалось при изменении раскладки.

CSS Gap Decorations (стабильный релиз в Chrome 149 2 июня 2026 года) меняют всё. Они вводят четыре новых свойства — gap-rule-width, gap-rule-color, gap-rule-style и gap-rule-break — которые позволяют стилизовать отступы между элементами в любой раскладке на основе gap: Grid, Flexbox и Multi-Column.

В этом руководстве я покажу всё, что нужно знать: какую проблему решают gap decorations, полный синтаксис каждого свойства, сравнение «до и после» с примерами кода, реальные паттерны и стратегию прогрессивного улучшения для production.

Проблема: стилизация отступов до появления Gap Decorations

До Chrome 149, чтобы создать визуальный разделитель — линию, пунктир или цветную полосу — между элементами в CSS Grid, приходилось использовать обходные пути:

Хак #1: Background-Color контейнера

Самый распространённый трюк — задать background-color контейнеру сетки и сделать отступы, через которые фон будет виден:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #ddd;
}
.grid-item {
  background: white;
}

Это работало, но было крайне ограниченным — только сплошные одноцветные «линии» размером, совпадающим с отступом. Пунктир, градиент или разноцветные линии? Невозможно.

Хак #2: Границы и псевдоэлементы

Другой подход — добавлять border-right и border-bottom каждому элементу сетки с отрицательными margin:

.grid-item {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-right: -1px;
  margin-bottom: -1px;
}

Это создавало линии по краям элементов (а не по центру отступа), ломалось при переносе строк и требовало сложной математики с отрицательными margin.

Хак #3: Box-Shadow для имитации линий

Некоторые разработчики использовали box-shadow:

.flex-item {
  box-shadow: -1px 0 0 0 #ccc;
}
.flex-item:first-child {
  box-shadow: none;
}

Этот подход не работал при переносе flex-элементов, был невидим на элементах с собственными тенями и расходовал память GPU на каждый элемент.

Решение: свойства CSS Gap Decoration

CSS gap decorations предоставляют четыре свойства, повторяющих паттерн column-rule, но работающих во всех раскладках:

Также доступно сокращённое свойство gap-rule:

/* Сокращение: gap-rule: <width> <style> <color> */
.container {
  display: grid;
  gap: 1rem;
  gap-rule: 1px solid #94a3b8;
}

Gap Decorations в Grid

Самый очевидный сценарий — CSS Grid. Создадим сетку карточек с тонким разделителем:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  gap-rule-width: 1px;
  gap-rule-color: #e2e8f0;
  gap-rule-style: solid;
}

.card {
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
}

Три CSS-свойства — и ваша сетка карточек получает аккуратный разделитель между всеми строками и колонками. Линия рисуется по центру каждого отступа, автоматически.

Gap Decorations в Flexbox

Gap decorations работают и во Flexbox — и это особенно ценно, потому что flex-элементы переносятся непредсказуемо:

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  gap-rule: 1px dotted #cbd5e1;
}

.nav-item {
  padding: 0.5rem 1rem;
}

До gap decorations создать пунктирные разделители между flex-элементами в переносящейся раскладке было практически невозможно без JavaScript. Теперь — три строчки CSS.

Сравнение «до и после»

Сетка товаров с четырьмя колонками и линиями-разделителями.

Старый подход (границы на элементах)

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.product-item {
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem;
}

.product-item:nth-child(4n) {
  border-right: none;
}
.product-item:nth-last-child(-n+4) {
  border-bottom: none;
}

Новый подход (Gap Decorations)

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem 1.5rem;
  gap-rule: 1px solid #e2e8f0;
}

.product-item {
  padding: 1.5rem;
}

Три строки CSS заменяют десять. Gap decorations автоматически обрабатывают перенос, адаптивное количество колонок и отступы.

Свойство gap-rule-break

Одна из самых мощных возможностей — gap-rule-break, управляющая поведением линии на пересечениях:

Поддержка браузеров и прогрессивное улучшение

По состоянию на июнь 2026 года CSS gap decorations поддерживаются в:

• Chrome 149+ (стабильный с 2 июня 2026)
• Edge 149+ (на Chromium, синхронно с Chrome)

Firefox и Safari рассматривают реализацию в будущих релизах. Спецификация CSS Working Group находится на стадии Editor's Draft.

Стратегия прогрессивного улучшения

Поскольку gap decorations чисто декоративны, они идеально подходят для прогрессивного улучшения. Базовая раскладка (свойство gap) работает во всех современных браузерах:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  gap-rule: 1px solid #e2e8f0;
}

В неподдерживаемых браузерах раскладка отображается нормально — элементы остаются с отступами, сетка адаптивна. Декоративные линии просто не появляются. Никаких поломок, наложений или смещений.

Для более глубокого изучения современных CSS-возможностей смотрите мои руководства по CSS Container Queries и CSS View Transitions.

FAQ

Готовы упростить свой CSS? Я занимаюсь фронтенд-архитектурой и разработкой. Посмотрите мои услуги или свяжитесь со мной для консультации.