CSS gap decorations are available in Chrome and Edge starting in version 149. The feature styles gaps between grid, flexbox, and multi-column layouts without borders or pseudo-elements. Previously, gap styling required workarounds such as borders, pseudo-elements, and background hacks, which depended on markup structure, interfered with accessibility by adding extra DOM nodes, were hard to maintain under responsive changes, hurt performance through additional layout work, and required complex geometric calculations. Multi-column layouts used column-rule, while grid and flexbox lacked equivalent functionality. Grid and flexbox containers now accept column-rule, and a new row-rule property handles horizontal gaps. These decorations are purely visual and do not affect existing layouts, and multi-column behavior remains unchanged when using column-rule. Additional controls enable fine-tuning at intersections, inset distance from gap edges, relative appearance timing, and variation across gaps.
"CSS gap decorations are available in Chrome and Edge starting in version 149. Style the gaps between grid, flexbox, and multi-column layouts without using borders or pseudo-elements. This feature was built in collaboration between the Microsoft Edge and Google Chrome teams."
"Styling gaps between layout items has always required workarounds. Borders on individual items, pseudo-elements, background hacks. These approaches have costs: They depend on structure. Adding a visual separator means changing your markup or writing selectors for specific items. They interfere with accessibility. Extra DOM elements show up in the accessibility tree when they shouldn't. They’re hard to maintain. Responsive layouts break the assumptions your gap styling was built on. They hurt performance. More DOM nodes, more layout work. They have poor authoring ergonomics. Complex geometric calculations were often needed to get things working correctly."
"Grid and flexbox containers now accept column-rule. A new row-rule property handles horizontal gaps. These decorations are purely visual and don't affect existing layouts. If you use the column-rule property in multi-column layouts, existing behavior remains the same. For example, here is a flex container with three panels using a list of styles for its column and row rules."
"As illustrated in this example, both row-rule and column-rule accept the same shorthand for width, style, and color. Use the rule shorthand to set both at once. However, we didn't just bring column-rule to other layout modes and add the row counterpart. We also introduced controls for fine-tuning your decorations: how they break at intersections, how far they inset from gap edges, when they appear relative to items, and how to vary styles across gaps."
Read at Chrome for Developers
Unable to calculate read time
Collection
[
|
...
]