Components · App chrome

Page grid

The responsive layout grid every page sits on: 12 columns on desktop, 8 on tablet, 4 on mobile, centred within a 1440px max width. Place content by column span and let the gutters and margins adapt across breakpoints.

Preview

span 12

span 8

span 4

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI

Apply the Zetta "Page grid" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `page-grid` spec (variants: desktop, tablet, mobile) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `page-grid` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

←──────────────── maxWidth ────────────────→
←margin→ [col][col][col][col][col]... ←margin→
          ↑ gutter between each column

Page Grid is a layout primitive. No interactive states.

State	Visual
Default	Grid columns applied per breakpoint

When to use

Page-level layout only: main content area, sidebar, full-width sections.

When not to use

Inside cards, modals, or component-level layouts — use flex or component-specific spacing.
When the layout is fixed-width and not responsive — use a simpler container.

Do

Always set responsive span values — never lock a column to 12 on mobile.
Use maxWidth on the grid to prevent ultra-wide content lines on large screens.

Don't

Don't nest Page Grids inside Page Grid Columns — use a single grid per page.
Don't use the grid for component-level spacing — use spacing tokens directly.

Page Grid defines layout only — it has no visual presence itself.
Content placed inside grid columns should follow the spacing and alignment tokens.
Do not use Page Grid for component-level layouts — use Flexbox or component-specific spacing.

Keyboard

Page Grid is a layout primitive and has no keyboard behavior.

Accessibility

Grid is purely presentational — no ARIA roles needed on the grid itself.
Ensure reading order in the DOM matches the visual order — do not reorder columns with grid-column-start in ways that confuse focus order.

Spec

Values and token references resolved straight from the Zetta spec.

page-grid

display: grid
gridTemplateColumns: repeat(12, 1fr)
gap: {grid.gutter.desktop}
maxWidth: {grid.max-width}
marginX: auto
paddingX: {grid.margin.desktop}
width: 100%

page-grid-mobile

gridTemplateColumns: repeat(4, 1fr)
gap: {grid.gutter.mobile}
paddingX: {grid.margin.mobile}

page-grid-tablet

gridTemplateColumns: repeat(8, 1fr)
gap: {grid.gutter.tablet}
paddingX: {grid.margin.tablet}

page-grid-column

minWidth: 0
overflow: hidden