v149 · CSS
Magazine Layout
A three-column editorial magazine layout using column-rule and row-rule for all separators. No borders, no pseudo-elements, no extra markup — all separator lines come from the grid container's gap decoration properties. Adjust style, width, and color live, then copy the generated CSS.
Gap Decorations: the end of the border hack
For years, adding visual separators between grid or flex items required brittle border hacks — borders on every cell, then selectively removing them with :first-child and :last-child rules. The result: markup-coupled CSS that breaks when you change the column count.
CSS Gap Decorations extend the multi-column column-rule model to every layout type. A single property on the container handles all separators.
Grid layouts
Data tables, card grids, and dashboards benefit immediately. Change the gap and the rules move with it — no recalculation of nth-child selectors needed.
Flex dividers
Navigation bars and tag lists are the most common flex use case. A single column-rule on the flex parent replaces border-right hacks on every item.
Multi-column text
The original home of column-rule — multi-column text — gets row-rule as a companion for horizontal page breaks in flowing text layouts like this magazine.
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗