No utilities
Class names mean something
You don't write col-span-7. You write wide-1. The intent is in the name — readable in markup, stable across refactors.
One centered grid,
three escape hatches.
The whole layout system is one CSS grid with named columns. Most content sits in standard. When you need to breathe, opt up to wide-1, wide-2, or full. No 12-column gridlines, no utilities to memorize.
01 — Columns
Four named widths, no gridlines.
Standard80rem · default width for all content
Wide-1+ 2rem · for emphasis and feature rows
Wide-2+ 4rem · for wider canvases and galleries
Full100% · when the content demands edge-to-edge
full100%
wide-2+ 4rem
wide-1+ 2rem
standard80rem
standard80rem
wide-1 · emphasis+ 2rem
standard80rem
full · CTA · footer100%
content flows at standard by default
child rows stay responsive automatically
nested grids work the same way
02 — Tracks
The actual column tracks.
03 — Why
Four names beat twelve columns.
Most layouts don't need col-span-7 lg:col-span-9 xl:col-span-6. They need: content here, wider here, full-bleed there. Name the intents, not the columns.
Nested-safe
Grids inside grids
Any child element can declare .grid and inherit the same column tracks. Layouts compose without recalculating widths at every level.
Responsive
Gap clamps automatically
Outer gutter is clamp(1rem, 6vw, 3rem). On a phone, gutters tighten. On a wide display, they breathe. No breakpoints to maintain.
Ready to ship?
Get the layout.
The grid ships as part of the system. Every page, every component, every section uses the same four names — and behaves the same way.