Skip to content

The grid as a spec sheet

LAYOUT

Twelve columns, a handful of spacing tokens, and the discipline to use them. Composition in MONO is arithmetic you can see.

01 — The twelve-column grid

Every layout on this site resolves to twelve columns with a 1rem gutter. The annotations below are the layout itself, measured.

12 × 1 — THE UNITS

1
2
3
4
5
6
7
8
9
10
11
12

4 / 8 — SIDEBAR + CONTENT, THE HOUSE SPLIT

col-span-4
col-span-8

8 / 4 — CONTENT + ASIDE

col-span-8
col-span-4

6 / 6 — THE EVEN ARGUMENT

col-span-6
col-span-6

4 / 4 / 4 — THE TRIPTYCH

col-span-4
col-span-4
col-span-4

02 — Spacing rhythm

Eight spacing tokens, from 4px to 96px. Vertical rhythm comes from repeating these — never from eyeballing margins.

--space-1 · 4px
--space-2 · 8px
--space-3 · 16px
--space-4 · 24px
--space-5 · 32px
--space-6 · 48px
--space-7 · 64px
--space-8 · 96px

03 — Asymmetry in practice

The grid above, doing real work: an editorial spread set 4/8, with a pull quote crossing the gutter.

Field notes · No. 04

The grid is a promise.

A deck sits in the narrow column: it frames the piece, sets the tone, and leaves the wide column free for the argument itself.

A reader meets a page the way a traveler meets a city: first the skyline, then the streets. The grid is the street plan — invisible when it works, bewildering when it doesn't. Set the columns honestly and the eye finds its way without a map.

Asymmetry is not imbalance. A four-column rail against an eight-column body is a hierarchy stated plainly: this frames, that argues. Symmetry asks the reader to choose; asymmetry chooses for them, and readers are grateful for it.

None of this requires color. Weight, scale, and position do all the pointing. When the bones are right, ink and paper are enough.

Symmetry asks the reader to choose; asymmetry chooses for them.

See the grid carry real pages.

A login screen, an article, a dashboard, a pricing table — all set on these twelve columns.

View the examples