Grid-layout

Multi-column grid that adapts to container width via auto-fit + minmax. Cells reflow into fewer columns as the container shrinks. Container-aware — no @media queries.

When to use

Card grids, feature grids, pricing tables.
Any uniform repeating layout where columns can adapt.

For asymmetric two-column layouts, use Split-layout. For ordered sequences in one direction, use Stack-layout.

Variants

Variant	Behavior
Default	`auto-fit` cells of min 16rem
`data-cols="2"`	Up to 2 columns
`data-cols="3"`	Up to 3 columns
`data-cols="4"`	Up to 4 columns
`data-cols="6"`	Up to 6 columns
`.-tight`	Compact gap
`.-loose`	Larger gap

Anatomy

<!-- Auto-fit: cells reflow based on container width -->
<section class="grid-layout">
  <article>Cell 1</article>
  <article>Cell 2</article>
  <article>Cell 3</article>
</section>

<!-- Max 4 columns -->
<section class="grid-layout" data-cols="4">
  <!-- ... -->
</section>

Tokens used

--space-gap-blocks-m — default gap
--space-gap-elements-m — tight gap
--space-gap-sections-s — loose gap
--space-inset-section-m — outer padding

Component-tier (generated)

--grid-layout-cell-min (16rem) — minimum cell width