For a long time now, web developers have had to use border and pseudo-element hacks to style the gaps between the items of layouts like grid and flexbox. Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.
Our Edge web platform team at Microsoft led both the design and standardization of the feature, and the implementation is rolling out across all Chromium-based browsers. For background, check out an early preview of gap decorations by my colleague Patrick, and a full deep dive about the stable release by my colleague Javier.
In this article, I want to share what has changed in the feature since then.
Catching up on gap decorations
Gap decorations extend the familiar column-rule CSS property, which already works in multi-column layout, and makes it work in grid and flexbox layouts too. In addition, there’s also now support for the row-rule property, so that decorations can be displayed in both axes. And finally, the syntax is extended to provide a lot more control of the decorations.
