Single-column layout

One clear stream of content running down the page, with no second column or sidebar competing beside it.

reads like a Substack or Medium posteverything stacked in one columnsimple page with no sidebarsingle colum layoutstraight down the pageone column websitemobile style pageblog post in the middle

See it

Live demo coming soon

What it is

A single-column layout gives the page one primary vertical stream. Headings, copy, images, and actions arrive in a clear top-to-bottom order, with no neighboring region competing for attention. A Medium article is the familiar shape.

Reach for it when the job is reading, completing a focused form, or moving through a short sequence. It is especially dependable on small screens because there is almost nothing to rearrange.

Gotcha: one column does not mean full width. Long lines are tiring, so give prose a sensible measure and center that measure inside the page. A long unbroken stack can also feel flat; headings, spacing, and occasional full-width media still need to create rhythm.

Ask AI for it

Build a single-column page with one main element in source order. Set the reading container to max-inline-size: 65ch and margin-inline: auto, use display: flex with flex-direction: column and gap for the vertical rhythm, and let images use inline-size: 100%. Keep body copy left aligned and allow only intentional media to break out wider than the text measure.

You might have meant

content widthvertical rhythmspacing scalewhitespace negative spacepage anatomy