auto-fill vs auto-fit — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 auto-fill vs auto-fit</h1>
    <p class="pg-sub">
      Same container, same <code>minmax(120px, 1fr)</code>, same number of cards — dragged into
      two grids that only differ by one word. Change the card count and watch what happens to the
      leftover space when there are fewer cards than columns.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="count-controls">
        <button class="btn" id="dec">−</button>
        <span class="count-display"><span id="count">2</span> card<span id="plural">s</span></span>
        <button class="btn" id="inc">+</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-n="1">1 card</button>
        <button class="btn sm primary" data-n="2">2 cards (the gotcha)</button>
        <button class="btn sm" data-n="4">4 cards</button>
        <button class="btn sm" data-n="8">8 cards (fills the row)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> <code>repeat(auto-fill, minmax(120px, 1fr))</code></div>
      <div class="stage fill-grid" id="fillGrid"></div>
      <p class="hint" id="fillHint">Empty tracks stay reserved and claim their share of the row — the cards you see don't stretch to fill it.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> <code>repeat(auto-fit, minmax(120px, 1fr))</code></div>
      <div class="stage fit-grid" id="fitGrid"></div>
      <p class="hint" id="fitHint">Empty tracks collapse to 0 — the fr unit only has real cards left to divide space between.</p>
    </div>

<div class="status" id="status">
      <span class="dot info" id="dot"></span><span id="statusText">Ready — try 1 or 2 cards, then jump to 8.</span>
    </div>
  </div>

preview

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