Native Gap Styling in CSS with Gap Decorations
Gap Decorations lets you draw and animate dividing lines in Grid and Flexbox without extra DOM nodes or pseudo-elements.
Adding dividing lines between columns or rows in Grid and Flexbox has always been a pain. You had to clutter the DOM with extra div elements, wrestle with ::before/::after pseudo-elements, or cobble together gradient hacks in background.
The Gap Decorations specification solves this natively. The browser now calculates the empty spaces itself and draws lines directly inside the gap.
Here’s what’s been added:
column-ruleandrow-ruleset the thickness, style, and color of lines in layout gaps.rule-breakcontrols how lines behave at intersections.rule-insetmoves the ends of lines inward within the gap. No moreheight: 80%through absolutely positioned pseudo-elements.rule-visibility-itemshides a divider if the adjacent element is empty or hidden.
🔥 These rules are full-fledged CSS properties, so you can easily animate them using transition or @keyframes.
What about support? The CSSWG is actively pushing the spec forward, and it’s already being tried out in Chromium (Chrome/Edge). We’ll have to wait for the other vendors before it reaches Baseline.