CSS Grid Lanes — native masonry, DOM order intact

<div class="pg">
    <h1 class="pg-title">🎮 CSS Grid Lanes: watch reading order survive masonry</h1>
    <p class="pg-sub">
      Same 9 cards, same document order every time. The dashed line traces that order,
      1 → 9, across the screen. Switch layouts and watch what each one does to it.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="seg" id="modeSeg" role="tablist" aria-label="Layout mode">
        <button type="button" data-mode="columns" aria-pressed="true">CSS columns (the hack)</button>
        <button type="button" data-mode="grid" aria-pressed="false">Plain grid (safe fallback)</button>
        <button type="button" data-mode="lanes" aria-pressed="false">Grid Lanes (native masonry)</button>
      </div>
      <div class="btn-row" style="margin-top: 12px">
        <button class="btn ghost" id="shuffle">Shuffle card heights</button>
        <label class="toggle" style="margin-left: 6px">
          <input type="checkbox" id="traceToggle" checked />
          <span class="switch"></span>
          <span>trace reading order 1 → 9</span>
        </label>
      </div>
      <p class="hint">
        Every mode shows the exact same 9 cards, numbered in the order they appear in the
        HTML — that number never moves. Only the layout strategy changes where each card
        lands on screen.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="banner" id="supportBanner">Checking your browser for native <code>grid-lanes</code> support…</div>
      <div class="stage-wrap">
        <svg id="traceSvg"></svg>
        <div class="stage mode-columns" id="stage"></div>
      </div>
      <div class="status" id="status" style="margin-top: 12px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready.</span>
      </div>
      <p class="hint" id="hint">Caption appears here.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The CSS behind this mode</div>
      <pre class="code" id="codeBlock"></pre>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.