Gap Decoration Divider Grid

Native divider lines drawn directly in a grid's gaps — column-rule and a brand-new row-rule property style the gutters between grid/flex cells with real CSS lines (color, width, style, even per-gap cycling via comma lists and repeat()), instead of the decades-old workaround of faking dividers with borders or box-shadows on the cells themselves (which always risks doubled lines at shared edges, or extra JS to strip the last cell's border). This extends column-rule — previously usable only inside legacy multi-column (`columns:`) layouts — to Grid and Flexbox for the first time, and introduces row-rule as its new horizontal-gap counterpart. Real, current (2026), cross-checked across multiple independent sources (not a single blog's guess, though this run's usual primary-fetch workaround was degraded — see below): Chrome for Developers' own posts 'A new way to style gaps in CSS' (the original explainer) and 'Gap decorations: Now available in Chromium' (the stable-ship announcement) both describe exactly this column-rule/row-rule mechanism; a second independent source, the Microsoft Edge Explainers repo's own 'CSS Gap Decorations' explainer (github.com/MicrosoftEdge/MSEdgeExplainers), corroborates the same property set and the repeat()/comma-list per-gap cycling syntax; MDN's own reference pages for row-rule-style/row-rule-color (title confirmed via search, not fetched in full this run — see honesty note below) independently show the same shorthand/longhand split. **Shipping status, stated plainly rather than rounded up:** Chrome and Edge 149 (stable, June 2026) ship it on by default, no flag; Firefox's standards-position is reported positive with an open implementation bug, meaning intent-to-support but not yet shipped; Safari/WebKit has no committed position yet (also an open but unresolved implementation bug) — this is a Chromium-only-today feature, not Baseline, not claimed as cross-browser. **Honesty note on this run's own sourcing limits:** this catalog's usual Firecrawl-based direct-fetch workaround for MDN/chromestatus.com (used since day 29 to route around this sandbox's standing `ENOTFOUND` egress block on those domains) was unavailable this run — the connected Firecrawl account returned 'insufficient credits' on every call attempted. Direct WebFetch to developer.chrome.com, developer.mozilla.org, and caniuse.com all hit the same `ENOTFOUND` block as every prior day, with no working bypass available this run (the Vercel-URL fetch workaround only reaches Vercel-hosted deployments, not these doc sites). So this entry's sourcing rests on WebSearch's own result aggregation (multiple independently-returned, mutually-agreeing page titles/snippets from developer.chrome.com, MDN, the Microsoft Edge explainer, and caniuse-mirroring sites) rather than a full primary-source page fetch — a real degradation from this routine's usual bar, logged honestly rather than silently passed off as a normal Firecrawl-verified day. Checked for overlap before building: no existing entry in this catalog sets column-rule, row-rule, or any gap-styling property — css-grid-lanes-masonry only controls packing, sibling-index-stagger-grid and reading-flow-accessible-grid only control animation timing and tab order — genuinely new ground. **Honest, safe fallback, verified in this run's own pinned Chromium (141.0.7390.37, below the 149 baseline — CSS.supports('row-rule-style','solid') confirms false in this sandbox, exactly as expected):** `@supports not (row-rule-style: solid)` applies plain `border-left`/`border-top` divider lines on the cells instead, approximating the same visual division (not the exact per-gap color cycling, which needs the real feature) so the grid never looks broken, doubled-up, or undivided in a non-supporting browser. No WebGL, no scroll-jacking, zero JS — fits the DIY $999 tier as cleanly as any CSS-only entry here. (Vanilla example: live iframe preview + HTML/CSS tabs.)

<div class="gdd-wrap">
  <p class="gdd-hint">Native divider lines drawn in the grid's own gaps — not borders on the cells.</p>
  <div class="gdd-grid">
    <div class="gdd-cell">Strategy</div>
    <div class="gdd-cell">Design</div>
    <div class="gdd-cell">Build</div>
    <div class="gdd-cell">Launch</div>
    <div class="gdd-cell">Support</div>
    <div class="gdd-cell">Scale</div>
    <div class="gdd-cell">Grow</div>
    <div class="gdd-cell">Repeat</div>
  </div>
  <p class="gdd-fallback-note">Your browser doesn't support gap decorations yet (Chrome/Edge 149+, no Firefox/Safari signal as of this run) — plain CSS border dividers are used instead, so the grid never looks undivided.</p>
</div>