subgrid — snap the card footers onto one line

<div class="wrap">
    <h1>🎮 subgrid: snap the footers onto one line</h1>
    <p class="sub">
      Three cards, one row. Each has a header, a <strong>different-length</strong> body, and a footer button.
      With <code>subgrid</code> off, every card is its own grid — the footer sits right under its own body, so the
      buttons scatter. Flip it on and the cards borrow the parent's <code>auto&nbsp;1fr&nbsp;auto</code> rows:
      headers share a row, footers share a row. <strong>No fixed heights, no JavaScript.</strong>
    </p>

<div class="panel">
      <h2>1 · Controls</h2>
      <div class="controls">
        <label class="toggle">
          <input type="checkbox" id="sub" />
          <span class="switch"></span>
          <span class="lab"><code>grid-template-rows: subgrid</code></span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="guide" checked />
          <span class="switch"></span>
          <span class="lab">Show footer baseline</span>
        </label>
        <div class="spacer"></div>
        <button id="shuffle">🎲 Shuffle content lengths</button>
      </div>
    </div>

<div class="panel">
      <h2>2 · The layout</h2>
      <div class="stage">
        <div class="cards" id="cards"></div>
        <div class="guide" id="guideLine"><span class="tag" id="guideTag">footers</span></div>
      </div>
      <div class="status bad" id="status"></div>
    </div>

<div class="panel">
      <h2>3 · The CSS that changed</h2>
      <div class="code" id="code"></div>
    </div>
  </div>

preview

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