v139 · 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. Spec Playground

    Every core knob the spec exposes — row-rule + column-rule, rule-inset, rule-break, rule-overlap, rule-visibility-items, and the repeat() patterning syntax — wired up across grid, flex, and multicol with live preview and generated CSS.

  5. Dashboard grid

    A data dashboard where every visual separator comes from column-rule and row-rule on the grid container — zero borders in the card markup. Toggle between solid, dashed, double, and coloured rule themes live.

  6. Multi-col magazine

    A multi-column editorial layout with live column count, rule style, width, and colour controls. Also demonstrates column-rule-outset — the new property that adjusts how far the rule extends into the gap toward each column edge.

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