Multi-column layout
Content arranged in three or more vertical lanes, either flowing like newspaper text or sitting as separate grid regions.
See it
What it is
A multi-column layout distributes content across three or more vertical lanes. For continuous prose, CSS Multi-column Layout flows text down one column and into the next like a newspaper. For independent cards or regions, CSS Grid is usually the better model.
Reach for flowing columns in compact editorial pieces where the full column height is visible, and use grid columns for dashboards, catalogs, and grouped content. In both cases, a consistent gutter is what keeps neighboring lanes from reading as one.
Gotcha: columns can make readers travel down, back up, then down again. That is awkward on a long scrolling screen and worse when a narrow column leaves one or two words per line. Reduce the column count early and never rearrange independent blocks into a confusing reading order.
Ask AI for it
Set this short editorial article in responsive CSS Multi-column Layout with columns: 3 18rem, column-gap: 2rem, and a subtle column-rule. Keep the heading across the full measure with column-span: all, prevent figures from splitting with break-inside: avoid, reduce to two columns when space tightens, and use one column below 700px.