Gap Decorations Are Now Available, Here’s What’s New
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
CSS gap decorations are now fully supported in Chrome and Edge 149+, enabling developers to style gaps between grid and flexbox items without hacks. The feature extends the familiar column-rule property to work in grid and flexbox, adds a new row-rule property, and introduces fine-grained control via properties like rule-inset, rule-overlap, and rule-visibility-items. Key changes since the early preview include renaming outset to inset, new longhand inset properties for caps and junctions, renaming gap-rule-paint-order to rule-overlap, and a new rule-visibility-items property. A step-by-step demo walks through applying gap decorations to a personal site with flexbox nav, wrapping flex sections, spanning grid items, and link grids. A polyfill is in development for unsupported browsers.
