Intent to Ship: CSS Gap Decorations

Skip to first unread message

Sam Davis Omekara

unread,
Apr 28, 2026, 3:25:37 PM (2 days ago) Apr 28
to blin...@chromium.org
Contact emails
Explainer
Specification
Summary
CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today.

Blink component
Web Feature ID
Motivation
Today, web authors rely on non-ergonomic workarounds such as the following examples to apply styles to the gaps in Grid and Flexbox layouts: 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 CSS Gap Decorations will allow authors to avoid such workarounds and apply styles in a seamless manner provided by the platform.

Initial public proposal
Search tags
TAG review
TAG review status
Issues addressed


Risks


Interoperability and Compatibility
Gap Decorations is a highly requested feature among web developers. Early discussions within the CSSWG meeting did not highlight any major concerns from other browser vendors so far. See discussions on: https://github.com/w3c/csswg-drafts/issues/10393

Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1158)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/444)

Web developers: Positive Developers are excited about the CSS Gap Decoration feature. See discussions around this here: https://github.com/w3c/csswg-drafts/issues/10393 

This also surfaced as a most requested missing feature in State of CSS 2023. https://2023.stateofcss.com/en-US/usage/#css_missing_features 

The chromium tracking issue (https://issues.chromium.org/issues/357648037) has 18 upvotes from developers.

Following dev trials, the feature drew substantial enthusiasm across web developer channels:

    Social media:

    Articles and videos:
        - https://youtu.be/L1-7dFQFb1c 
        - https://heydesigner.com/newsletter/product-design-2025/

Other signals:

WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
There are no WebView application risks.


Debuggability
DevTools already provides a layout overlay for gaps in Grid and Flexboxes. Computed values for new properties introduced for gap decoration will be exposed.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes

Is this feature fully tested by web-platform-tests?
Flag name on about://flags
enable-experimental-web-platform-features

Finch feature name
CSSGapDecoration

Rollout plan
Will ship enabled for all users

Requires code in //chrome?
False

Tracking bug
Estimated milestones
Shipping on desktop
149
DevTrial on desktop
139
Shipping on Android
149
Shipping on WebView
149


Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
There are no open issues affecting the current level of the spec. All open issues are scoped to a future level of the spec and do not introduce web compat or interop risk for what is shipping now.

Link to entry on the Chrome Platform Status
Links to previous Intent discussions

Philip Jägenstedt

unread,
Apr 29, 2026, 5:36:19 AM (yesterday) Apr 29
to Sam Davis Omekara, blin...@chromium.org
Hey all,

It's great to see this highly requested feature completed! The test suite looks quite big in terms of number of tests, and tests across layout models, but there are 9 failing tests. Are the reasons for these failures understood? It it feasible to fix them all?

Best regards,
Philip

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH3PR00MB2681301B231C1C1B50B21206D8372%40CH3PR00MB2681.namprd00.prod.outlook.com.

Sam Davis Omekara

unread,
Apr 29, 2026, 5:47:54 PM (16 hours ago) Apr 29
to blink-dev, Philip Jägenstedt, blin...@chromium.org, Sam Davis Omekara

Hi Philip,

Thanks for reviewing. All the failing tests are understood. Here’s a breakdown of the issues:

  • Insets ink overflow tests (6):
    • grid-gap-decorations-091.html, grid-gap-decorations-092.html, flex-gap-decorations-066.html, flex-gap-decorations-067.html, multicol-gap-decorations-038.html, multicol-gap-decorations-039.html  
    • The change was made last Friday, and the wpt runner is not running the latest Chrome Canary version hence the reason why these are failing
  • Minor fragmentation issues (3):
    • flex-gap-decorations-fragmentation-005.html, flex-gap-decorations-fragmentation-006.html, multicol-gap-decorations-007.html
    • These issues are well-understood, and we don't consider them feature blocking, but we have work in progress to address them.
Reply all
Reply to author
Forward
0 new messages