Sibling-Index Stagger Grid

A grid of cards that fades/slides in with a staggered per-card delay — the classic 'list items cascade in one after another' entrance every site either hand-writes as a chain of `:nth-child(1)`, `:nth-child(2)`... delay rules (breaks the moment the item count changes) or reaches for a JS stagger helper (GSAP's `stagger`, Framer Motion's `staggerChildren`) to do. Here the delay is computed directly in the cascade with the new CSS `sibling-index()` function — `animation-delay: calc((sibling-index() - 1) * 90ms)` — so it automatically adapts to however many cards are actually in the grid, no JS, no per-item rule. Real, current (2025/2026), cross-checked across independent sources (not a single blog's guess): the Chromium 'Intent to Ship: CSS sibling-index() and sibling-count()' thread (groups.google.com/a/chromium.org/g/blink-dev) targeted milestone 138, and Chrome's own 138 release notes (developer.chrome.com/release-notes/138) list it as shipped; two independent write-ups — Frontend Masters' 'Staggered Animation with CSS sibling-* Functions' and OpenReplay's 'Staggered animations with sibling-index() instead of :nth-child()' (also read via its translated DE/ES/PT/FR mirrors, all agreeing) — both demonstrate the exact `calc((sibling-index() - 1) * <unit>)` pattern used here, independently of each other. **Disagreement found and flagged, not glossed over:** SitePoint's write-up states Chrome 137, which conflicts with Chrome's own 138 release notes and the Intent-to-Ship thread's own target milestone — 138 is treated as correct here since it comes from two independent primary-adjacent sources (Chrome's own release notes + the Intent-to-Ship thread) against SitePoint's one. **Cross-engine status, also flagged as less certain:** OpenReplay (and its own translated mirrors, cross-checked for agreement) states Safari shipped it in 26.2 (December 2025) and Firefox in 154 (August 2026), which — if accurate — would make this catalog's first genuinely cross-browser 'bleeding edge' entry rather than a Chromium-only one; but a `jquery.app` tool page claims Firefox/Safari still lack it as of May 2026 (older than OpenReplay's claim, so more likely stale, but this run could not resolve the conflict at a primary source — MDN and caniuse were both blocked by this sandbox's standing `ENOTFOUND` egress block, the same gap recorded against every prior day's entries). Treated here as 'Chrome/Edge 138+ confirmed, Safari 26.2+/Firefox 154+ reported but not independently primary-sourced this run' — stated honestly rather than asserted as settled. **Honest, safe fallback, verified in this run's own pinned Chromium (141.0.7390.37, comfortably past the 138 baseline):** `@supports not (top: calc(1px * sibling-index()))` catches any engine that can't parse the function at all and zeroes the delay, so every card just fades in together at once instead of staggering — never broken, never stuck invisible, never out of order. No WebGL, no scroll-jacking, zero JS — fits the DIY $999 tier's constraint as cleanly as it fits here, and a staggered card/feature grid is a directly useful, commonly-requested real component for small-business sites. Checked for overlap before building: `css-grid-lanes-masonry` only affects grid *placement* (`grid-template-rows: masonry`), not entrance timing, and no other entry in this catalog uses `sibling-index()`/`sibling-count()` or computes a per-item stagger natively — genuinely new ground, not a tweak to an existing entry. (Vanilla example: live iframe preview + HTML/CSS tabs — reload the preview to watch the six cards cascade in, each one firing exactly 90ms after the last.)

<div class="sis-grid">
  <div class="sis-card"><span class="sis-num">01</span><span class="sis-label">Plan</span></div>
  <div class="sis-card"><span class="sis-num">02</span><span class="sis-label">Build</span></div>
  <div class="sis-card"><span class="sis-num">03</span><span class="sis-label">Launch</span></div>
  <div class="sis-card"><span class="sis-num">04</span><span class="sis-label">Grow</span></div>
  <div class="sis-card"><span class="sis-num">05</span><span class="sis-label">Scale</span></div>
  <div class="sis-card"><span class="sis-num">06</span><span class="sis-label">Repeat</span></div>
</div>
<span class="sis-note">Needs Chrome/Edge 138+ (Safari 26.2+/Firefox 154+ reported) for the native per-card stagger — elsewhere every card just fades in together at once, never broken or out of order.</span>