How Do CSS Gap Decorations in Chrome 149 Change Webflow Grid Design?

Chrome 149 hit beta on May 6, 2026 with CSS Gap Decorations enabled by default. The feature lets designers style the whitespace inside CSS grid, flexbox, and multi-column layouts directly using column-rule and the new row-rule properties, removing the need for borders or pseudo-element workarounds. Stable targets June 2. For Phoenix Studio, almost every B2B SaaS case-study-grid scope I have shipped over the last 18 months includes a divider workaround like the nth-child border hack. Across 70 plus Webflow builds, Gap Decorations finally retire that line item from my scopes-of-work. In this piece I walk through what changed, how to ship it today as a progressive enhancement, and what changes for Webflow case-study galleries when stable lands in two weeks.

What are CSS Gap Decorations and why did Chrome 149 ship them?

CSS Gap Decorations are a set of CSS properties that let designers style the whitespace between items in grid, flexbox, and multi-column layouts directly, without using borders on the items or pseudo-elements injected between them. Chrome 149 enabled the feature by default on May 6, 2026, with stable rollout targeting June 2, 2026. The implementation follows the W3C CSS Gaps Module Level 1 working draft.

The structural reason Chrome shipped Gap Decorations is that the existing workarounds for grid and flex dividers are all fragile. Borders on items cause sizing issues. Pseudo-elements injected between items break with dynamic content. Background-color trickery on the parent does not handle missing items at the end of a row. Gap Decorations solve the actual problem natively. The piece on CSS color-mix multi-color blends covered a parallel CSS workaround retirement from the same Chrome family.

How is column-rule different from the new row-rule property?

column-rule is an existing CSS property that styles the vertical lines between columns in a multi-column layout. Chrome 149 extends column-rule to work inside grid and flexbox layouts and adds the new row-rule property that styles the horizontal lines between rows. The two properties work together to define the full set of dividers in a two-dimensional grid layout with a single pair of declarations.

The practical Webflow application is a case-study grid with 3 columns and 2 rows of items, where the design calls for thin gray dividers between every item. The pre-Chrome-149 implementation required either a CSS Grid wrapper with custom borders, a flex layout with pseudo-elements, or a Webflow Designer hack with nested div blocks. The new implementation is two CSS lines: column-rule and row-rule on the grid container. Webflow custom code in a single Designer embed handles the full divider system.

Why were pseudo-element divider hacks problematic in Webflow Designer?

Pseudo-element divider hacks were problematic in Webflow Designer because the Designer does not natively expose ::before and ::after pseudo-elements. Designers had to write custom CSS in a Designer embed, which removes the visual editing affordance that Webflow's UI provides. Non-technical editors could not adjust the divider thickness or color without touching custom code, which made the pattern fragile across handoffs.

Across the 70 plus Webflow builds at Phoenix Studio, the recurring pattern was that the divider hack survived the initial design pass and broke when a non-technical editor moved a grid item or added a new card. The breakage was usually a missing divider at the new item's position or a doubled divider at the row boundary. Gap Decorations make the pattern editable in the Designer through standard CSS properties that the Webflow editor can manage natively, which closes the fragility loop.

How do you add Gap Decorations to a Webflow grid today?

To add Gap Decorations to a Webflow grid today, open the Webflow Designer, select the grid element, add a custom code embed inside the grid wrapper or to the page settings custom CSS, and write the column-rule and row-rule properties scoped to the grid's CSS class. The properties accept the same syntax as the existing border-style declarations: width, style, and color. Publish the site and verify the dividers render in Chrome 149 or later.

The progressive-enhancement pattern at Phoenix Studio is to keep the existing divider workaround in place for non-Chromium browsers and to add the Gap Decorations CSS as a refinement using a @supports query. The @supports check tests for column-rule on the grid display type and applies the new style only when supported. Older Safari and Firefox versions continue rendering with the workaround. Chrome 149 and Edge users see the cleaner native rendering. The piece on Chrome 148 stable Prompt API covered the same progressive-enhancement discipline applied to a different feature.

Does Safari 26.5 support Gap Decorations yet?

Safari 26.5 does not yet support Gap Decorations as of May 17, 2026. The feature is implemented in Chromium-based browsers (Chrome and Edge) starting in version 149. Safari and Firefox are tracking the W3C CSS Gaps Module Level 1 working draft but have not shipped implementations. The Interop 2026 dashboard at wpt.fyi shows Gap Decorations as an emerging feature with partial cross-browser support.

For B2B SaaS Webflow sites, the practical implication is that Gap Decorations are a Chromium-only feature for at least the next several months. Sites serving traffic from Safari and Firefox users need either a workaround fallback or accept the visual divergence between browsers. The right discipline is progressive enhancement: ship the workaround for all browsers, layer the native Gap Decorations on Chromium-supported versions, and verify the visual difference is acceptable to the client design team.

What does the column-rule-break property do?

The column-rule-break property controls whether the column rules break at row boundaries inside a grid layout. The default behavior continues the column rules through the row gaps, which produces a full-height vertical line. Setting column-rule-break to allow breaks the rules at row boundaries, which produces shorter vertical lines that match the height of each row's content. The choice depends on the visual design.

For Phoenix Studio's typical B2B SaaS case-study grid, the default continuous column rule looks cleaner because it produces a strong vertical structure that anchors the grid visually. For case-study grids with significantly different content heights per item, the allow setting produces a more organic look that respects the content's natural rhythm. The right choice is design-team-specific. The CSS property exists to support both patterns without requiring multiple workarounds.

Should you ship Gap Decorations as a progressive enhancement?

Yes, ship Gap Decorations as a progressive enhancement for Webflow sites that already use grid or flex layouts with dividers. The pattern wraps the new CSS in a @supports query, applies it conditionally on supported browsers, and leaves the existing workaround in place as the baseline. The total CSS addition is typically 10 to 20 lines per template, which is small enough to ship without performance concerns.

For Phoenix Studio's retainer clients, the practical migration pattern this month is to identify the templates that ship grid or flex dividers, write the @supports-wrapped Gap Decorations CSS for each template, test on Chrome 149 beta, and ship as a progressive enhancement. The work takes about 30 to 45 minutes per template. When Chrome 149 hits stable on June 2 and Safari and Firefox eventually ship their implementations, the progressive enhancement becomes the default rendering without further code changes.

How will the W3C CSS Gaps Module Level 1 spec evolve from here?

The W3C CSS Gaps Module Level 1 spec is currently a working draft maintained by the CSS Working Group. The next stages are Candidate Recommendation and eventually Recommendation status, which depend on cross-browser implementation feedback and editorial work. Browser implementations in Chrome 149 inform the spec evolution and may surface edge cases that require spec updates before Candidate Recommendation.

For B2B SaaS Webflow sites, the spec evolution does not require active monitoring. The CSS properties that ship in Chrome 149 are stable enough for production use, and any future spec refinements will likely be backward-compatible with the current implementation. The practical pattern is to track Chrome and Safari stable releases for implementation parity rather than tracking the W3C spec directly. The W3C draft is the underlying authority; the browser implementations are what determines real-world support.

When will Gap Decorations become Baseline Newly available?

Gap Decorations will reach Baseline Newly available status when all three major browser engines (Chromium, Gecko, WebKit) ship the feature in stable channels. Chrome 149 ships Chromium support starting June 2, 2026. Firefox and Safari implementation timelines are not publicly committed but are typically several months behind Chromium for new CSS features. A realistic estimate is that Gap Decorations reach Baseline Newly available between Q3 2026 and Q1 2027.

For Phoenix Studio's typical Webflow client mix, the Baseline timeline matters because Newly available status changes the discipline around feature use. Before Newly available, the feature ships as a progressive enhancement with a fallback. After Newly available, the feature ships as the default with the fallback reserved for older browser versions. The discipline shifts from defensive to default. The piece on Webflow's May 13 Premium plan changes covered related platform-state shifts from the same week.

What changes for Webflow case-study galleries after Chrome 149 stable?

After Chrome 149 stable on June 2, 2026, Webflow case-study galleries built on grid or flex layouts can use Gap Decorations as the default divider implementation for the majority of site visitors. The remaining Safari and Firefox traffic continues seeing the workaround fallback until those engines ship their implementations. The visual experience converges over the following 6 to 12 months as cross-browser support matures.

For Phoenix Studio's case-study gallery template, the post-Chrome-149-stable plan is to ship Gap Decorations as the primary implementation and retire the nth-child border workaround from new builds. Existing client sites continue using the workaround until the next planned redesign or refresh, when the migration happens as part of normal maintenance. The Designer-side work is small. The practical compounding benefit is the elimination of one recurring scope-of-work line item across every new B2B SaaS case-study build.

If you are auditing a Webflow case-study gallery for the Chrome 149 stable rollout and want to talk through the progressive-enhancement migration for your specific templates, drop me a line and tell me how many grid or flex templates currently ship divider workarounds. I will share the @supports-wrapped Gap Decorations CSS pattern I am running on Phoenix Studio client sites this month. Let's chat.