Make room for the unexpected.
Large spans create calm. A six-column feature gives the eye a place to land before the next thought begins.
Read storyA working layout study
Space, given
some rules.
A 1440px fluid grid for editorial compositions, product stories, and ideas that need room to breathe.
CANVAS
1440px
maximum width
COLUMNS
12
equal fluid tracks
GUTTER
24px
consistent negative space
MODE
FLUID
no breakpoint reflow
Composition
One grid.
Many voices.
The system is deliberately quiet. It gives every element a place without dictating what the page has to say.
Use spans to build a visual hierarchy, then let the 12 columns do the aligning. Because each track uses a fraction, the canvas stays fluid while the relationships stay stable.
“
Good grids disappear into the work.— A designer's field note
Contrast is a navigation tool.
Shift tone, scale, and density across the same tracks to guide attention without adding visual noise.
Read note
03
Start with structure.
Structure is a generous constraint. It keeps the details from competing before they have something to say.
04
Let rhythm repeat.
Repetition creates a visual pulse. Every gutter is a small pause between ideas.
05
Keep the edges honest.
Aligning the outer edges makes even a loose composition feel intentional and considered.
Anatomy
The 12-column
understory.
Canvas
The content area can grow to 1440px wide. Side space keeps the composition from feeling stretched on large screens.
Columns
Twelve equal tracks create the underlying rhythm. Every item starts and ends against this shared structure.
Gutters
Each column has a 24px gap between it and the next. Gutters create breathing room without breaking alignment.
Spans
A span tells an element how many columns to occupy: 3 for a small block, 6 for half, or 12 for the full row.
Fluid
Fractional tracks stretch and shrink with the available width. The grid stays flexible instead of using fixed pixels.
Not responsive
There are no breakpoint layouts here. The same twelve columns remain in place at every width, so only their size changes.