v149 · CSS

CSS Gap Decorations

Draw lines inside the gaps of grid, flexbox, and multi-column layouts — without borders, pseudo-elements, or extra markup. column-rule now works in all layout types, and a new row-rule property handles horizontal gaps.

concepts

  1. Gap-Ruled Grid

    An editorial card grid with column-rule and row-rule drawing separator lines between cells — no borders, no extra elements, no layout impact.

  2. Flex Dividers

    Navigation bars, tag lists, and stat blocks using column-rule in flexbox. Alternating rule styles with the repeat() syntax for dashed/solid separators.

  3. Rule Builder

    Interactive builder: choose layout type (grid / flex), adjust gap width, rule width, style, and color — see the CSS update live and copy the generated snippet.

  4. Data Table Rules

    A CSS grid used as a revenue data table — column-rule separates the quarter columns and row-rule separates rows. Toggle each rule on/off and adjust style live; the generated CSS is shown alongside the old "border on every cell" boilerplate.

  5. Animated Rules

    Live controls for animating column-rule and row-rule properties — pick colors, adjust widths and styles, then watch the transitions apply smoothly across all gaps simultaneously. Preset themes show blueprint, ruled-paper, accent-stripe, and thick-border styles with a single click.

  6. Compatibility Lab

    Probes column-rule in flex/grid, row-rule, the repeat() syntax, and the gap-rule shorthand with CSS.supports(). Side-by-side comparison of native gap decorations vs the old border-on-every-cell fallback, plus the @supports progressive-enhancement pattern to copy.

  7. Magazine Layout

    A three-column editorial layout using column-rule and row-rule for all separators — no borders, no pseudo-elements, no extra markup. Toggle between gap decorations and the equivalent border fallback to see the CSS difference, adjust rule style/width/color live, and copy the generated snippet.

  8. Border vs rule: shared-edge problem

    Side-by-side grid showing the classic double-border artefact when using cell borders vs the clean single line from column-rule / row-rule. Zoomed-in probe highlights the 4px shared edge vs the 2px rule. Includes a code comparison table showing the difference.

why it shipped

Adding visual separators between grid or flexbox cells has always been a hack. The cleanest workaround was border on every child — but borders double up at shared edges, requiring :first-child/:last-child selectors to cancel them, and they participate in the box model so they affect layout. Pseudo-elements positioned inside gaps were even more fragile. CSS multi-column layout had the right model — column-rule draws a line inside the gap, purely decorative, zero layout impact — but it only worked for multi-column. Gap decorations extend column-rule to grid and flexbox and introduce the matching row-rule property, closing a gap (so to speak) that web developers have complained about for over a decade.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗