Skip to content

Grid

Stable Available in release assets

Grid creates an intrinsic responsive collection whose columns fit the available container width.

Grid primary example

Show code
<div class="thin-grid" style="--thin-grid-min: 14rem">
  <article class="thin-card">One</article>
  <article class="thin-card">Two</article>
  <article class="thin-card">Three</article>
</div>

Anatomy

  • Layout wrapper or semantic adapter
  • Direct grid items

Variants and sizes

  • <thin-grid>
  • class="thin-grid"
  • --thin-grid-min and --thin-grid-space overrides

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Single-column narrow container
  • Multiple intrinsic columns
  • Unbreakable and localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Layout never changes semantic order. Links, landmarks, headings, and document scrolling remain browser-native.

Accessibility

Preserve DOM reading order, use semantic wrappers when landmarks or headings are required, and never rely on layout alone to communicate structure.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Grid is a CSS-only layout host. Prefer --thin-grid-min over viewport media queries so columns respond to the container, not the screen.

Behavior tier: css-only

Hosts

Apply the class to the HTML element that supplies the appropriate landmark or content role.

  • <div class="thin-grid">…</div>
  • <div class="thin-grid">…</div>

Custom properties

PropertyDefaultDescription
--thin-grid-min16remMinimum track size used by auto-fit columns.
--thin-grid-spacevar(--thin-space-m)Gap between grid items.

Examples

Intrinsic collection
One
Two
Three
<div class="thin-grid" style="--thin-grid-min: 14rem">
  <article class="thin-card">One</article>
  <article class="thin-card">Two</article>
  <article class="thin-card">Three</article>
</div>

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Stability evidence

  • Canonical public API and complete documentation: test:tests/unit/release/stability.test.ts
  • Production-asset difficult-content fixture: test:tests/unit/release/stability.test.ts
  • Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol

Composition

Derived from the examples and style specs, not authored.

Composes

Used by