Grid
Section spacing rhythm, column gutter patterns, and page flow utilities.
Column Grids
Column layouts use CSS grid with the grid-gap utility (--grid-gap) for standardized column gutters. All examples use container queries for responsive behavior.
2-column
3-column
4-column
Asymmetric (content + sidebar)
Asymmetric (wide + narrow, 2/3 + 1/3)
Spacing Scale
Visual reference for the spacing tokens. Use these for padding, margins, and gaps.
Section Component
The Section primitive wraps page sections with a <section> element, @container, constrained content width, and horizontal padding. Non-seamless sections have no vertical padding (page-flow handles spacing). Seamless and withPadding sections get standardized vertical padding tied to --section-gap. Headings are composed as children.
Seamless (background, standardized vertical padding)
Seamless Section
Seamless sections add data-seamless and get standardized vertical padding tied to --section-gap, matching the inter-section rhythm. Background goes on Section via class.
Seamless + Seamless in page-flow (zero gap)
Default + Seamless + Default in page-flow
Non-seamless sections get --section-gap margin from page-flow. Seamless sections get the same gap relative to non-seamless neighbors, but 0 gap between adjacent seamless sections.
Content Width
Section handles this automatically: <section> is full-width (backgrounds bleed to edges), the inner container constrains content to --container-max and provides @container for responsive queries.
Constrained content (default)
Full-bleed background, constrained content
Composition Example
A typical marketing page using Section inside a page-flow wrapper. Adjacent seamless sections butt up (0 gap). Non-seamless sections get --section-gap margin. All spacing comes from one variable.