11.06.2025, Ссылка на статью
CSS Gap Decorations – новый способ стилизации отступов во флексах и гридах, анонсированный весной этого года. Новая фича позволит стилизовать отступы между колонками и строками сеток, как будто это обычный border.
Отступы в компонентах пользовательского интерфейса, таких как календари, карточки или сетки данных, могут значительно улучшить читаемость и улучшить общую эстетику. Однако достижение этого эффекта в макетах флексов и гридов традиционно требовало неудобных обходных путей с границами, псевдоэлементами или комбинацией gap и background-color у родительского элемента. Такие “хаки” не самые удобные и имеют несколько проблем: не интуитивно-понятные, порождают копирование кода, сложны в поддержке и расширяемости.
Новую фичу можно испытать в Chrome и Edge 139 в подготовленной песочнице.
Тестирование фичи
Для тестирования Gap Decorations может потребоваться включить флаг в браузере: на странице chrome://flags необходимо включить Enable Experimental Web Platform Features.