card-grid — the subgrid equalizer

CardGrid renders one auto-fit grid — repeat(auto-fit, minmax(min(100%, var(--jx-grid-min)), 1fr)) — plus the subgrid equalization law: the grid defines two shared rows (header / body), every direct child spans both and opts into grid-template-rows: subgrid, so headers align to the tallest header and bodies fill to the tallest body at any column count. The cards come from YOUR children snippet — the grid never asks what a child is; any two-block card qualifies, and data-no-subgrid opts a child out. A lone child is capped at the 46rem editorial measure instead of stretching banner-wide.

The eight axes resolve on the section as a landlord: the grid's OWN paint is one fixed 20px gap plus structural geometry — density-inert by construction, because the space ladder hangs off the :root-anchored --jx-unit that no rung scope re-bases. What the axes move is the SUPPLY: the named density rung stamps the scope the tenants live in, and their --jx-inset/--jx-stack channels re-base (measured 12 / 16 / 20px tenant padding across the rungs). Kinship, named precisely: grid and stack are the sibling layout primitives riding the same fixed space ladder — layout families are supply-only-on-self by construction. The grid is a LEAF that composes nothing and is composed by nothing in the fleet (grep receipt: only the blueprint scenes mount it).

• > the GRID owns grid-template-rows: auto 1fr; each child grid-row: span 2 + grid-template-rows: subgrid — no JS, no measurement, no ResizeObserver
• > works with any two-block card: the grid never asks what the child is — section-card qualifies unchanged
• > the opt-out is an attribute, not a prop: data-no-subgrid on a wrapper keeps the cell but restores the child's own rows

<script lang="ts">
  import CardGrid from '@ui/card-grid.svelte';
  import SectionCard from '@ui/section-card.svelte';
</script>

<CardGrid min={260}>
  <SectionCard eyebrow="alpha" title="Short header" summary="One summary line.">
    <p>Body.</p>
  </SectionCard>
  <SectionCard
    eyebrow="beta"
    title="A deliberately much longer header that wraps"
    summary="A longer summary pushing the shared header row taller — every header aligns to it."
  >
    <ul class="flex flex-col gap-2">
      <li>body fills to the tallest row</li>
      <li>…</li>
    </ul>
  </SectionCard>

  <!-- not a two-block card? opt the child out of the shared rows -->
  <div data-no-subgrid><!-- anything --></div>
</CardGrid>