CSS Gap Decorations – будущее оформления отступов в CSS

CSS Gap Decorations – новый способ стилизации отступов во флексах и гридах, анонсированный весной этого года. Новая фича позволит стилизовать отступы между колонками и строками сеток, как будто это обычный border.

Отступы в компонентах пользовательского интерфейса, таких как календари, карточки или сетки данных, могут значительно улучшить читаемость и улучшить общую эстетику. Однако достижение этого эффекта в макетах флексов и гридов традиционно требовало неудобных обходных путей с границами, псевдоэлементами или комбинацией gap и background-color у родительского элемента. Такие “хаки” не самые удобные и имеют несколько проблем: не интуитивно-понятные, порождают копирование кода, сложны в поддержке и расширяемости.

Новую фичу можно испытать в Chrome и Edge 139 в подготовленной песочнице.