CSS Working Group updates gap decorations draft for grid and flex

The CSS Working Group published an updated CSS Gap Decorations Level 1 Working Draft on March 6. The dated announcement extends the familiar idea of multicolumn rules to grid and flex layouts, while revising how authors control placement around intersections and empty regions.

The draft makes gap rules more explicit

The revision renames the former -outset properties to -inset and reverses the corresponding positive and negative semantics. It also lets authors specify different offsets at outer edges versus interior intersections, and at the start versus end side. New *-rule-visibility-items properties govern whether decorations appear next to empty areas.

Those details matter in components whose tracks change with content. A rule that looks correct in a full dashboard can become a dangling stroke when one grid cell is absent, or extend too far when a responsive layout collapses. The proposed controls aim to express those cases in layout terms instead of requiring generated pseudo-elements tied to a particular track count.

Treat the syntax as moving specification work

This is a Working Draft, so it is a design milestone rather than a compatibility signal. Teams can use it to evaluate whether the model covers tables, card grids, and split panes, but production use still needs browser support checks and fallbacks. The rename itself is a reminder that experiments built against earlier drafts may need updating.

A useful review exercise is to take a component that currently draws separators with borders or pseudo-elements and list its edge cases: wrapping, empty slots, writing modes, and animated gaps. That gives CSSWG concrete feedback and helps teams decide whether progressive enhancement will be straightforward when implementations mature.