CSS Gap Decorations Expand to Flex and Grid Layouts in Chrome and Edge 149
CSS gap decorations, previously limited to multi-column layouts, now work across flex and grid containers starting with Chrome and Edge version 149 and other Chromium-based browsers. The existing column-rule property has been extended to apply in these new contexts, while a new row-rule property handles the perpendicular axis, enabling cross-hatch line patterns through gutters without modifying child elements. A new rule shorthand allows both axes to be styled simultaneously when symmetric ruling is needed. The feature also introduces granular inset longhands — covering caps, junctions, and start/end points — giving developers precise control over where rules begin and end, particularly at intersections. Additionally, rule-overlap replaces the earlier gap-rule-paint-order property to determine which axis renders on top at crossings, and rule-visibility-items controls whether decorations appear alongside empty container areas.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in