CSS Gap Decorations

[kbabbitt]

WebKittens

No response

Title of the proposal

CSS Gap Decorations

URL to the spec

https://drafts.csswg.org/css-gaps-1/

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md

TAG Design Review URL

https://github.com/w3ctag/design-reviews/issues/1035

Mozilla standards-positions issue URL

https://github.com/mozilla/standards-positions/issues/1158

WebKit Bugzilla URL

No response

Radar URL

No response

Description

CSS multi-column containers allow for rules to be drawn between columns. Applying similar styling to other container layouts such as grid and flex has been widely sought after, as seen in the discussion for CSS Working Group issue #2748 and in several StackOverflow questions ( [1] [2] [3] [4] ). Currently, developers seeking to draw such decorations must resort to non-ergonomic workarounds such as these examples:

• https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas
• https://x.com/geddski/status/1004731709764534274

This proposal seeks to:

• Extend CSS column rule properties to apply to container layout types beyond multi-column.
• Introduce row-direction gap decorations on CSS container layouts.
• Allow gap decorations to vary over a given container to handle cases such as alternating row separators.