The columns shorthand turns a single flowing block into a magazine-style multi-column layout — newspaper text, product feature grids, sidebars of links. Pick a target column-width and the browser figures out how many columns fit; combine with column-span: all for headings that break out and break-inside: avoid to keep items from splitting across columns.
| Property | What it does | Tip |
|---|---|---|
column-count | Hard cap on number of columns. | Use when the page width is fixed and you want exactly N columns. |
column-width | Target / minimum column width — browser fits as many as it can. | Use for responsive: column-width: 18rem = "fit as many ~18rem columns as the container allows". |
columns: N W | Shorthand. With both, count is the max and width is the optimum. | columns: 3 200px = up to 3 cols, each at least 200px wide. |
column-gap | Gutter between columns. | Inherits the global gap spec keyword (normal ≈ 1em). |
column-rule | Border-style line drawn in the centre of each gap. | Doesn't add to layout width — the rule fits inside the existing gap. |
column-span: all | Makes a child span every column (headings, pull-quotes, full-width images). | Only none and all exist — no "span 2 of 3". |
break-inside: avoid | Asks the browser not to split this box across columns / pages. | Apply to figures, headings + first paragraph, cards. It's a hint, not a guarantee. |
column-fill | balance tries to even out heights; auto fills the first column fully, then the next. | Most browsers ignore balance when the container has a fixed height — auto kicks in. |
.article {
columns: 3 18rem; /* 3 cols max, drops to 2 / 1 as width shrinks */
column-gap: 2.5rem;
column-rule: 1px solid #e5e7eb;
}
.article h2,
.article .pull-quote {
column-span: all; /* full-width headings & pull quotes */
margin: 1.5rem 0 .5rem;
}
.article h3,
.article figure {
break-inside: avoid; /* don't split a heading or figure across cols */
}
.article h3 + p {
break-before: avoid; /* keep first paragraph attached to its heading */
}
Heads up: column-span is fully supported (Chromium, Firefox, Safari). column-fill: balance-all and the break-*-after / before family have spottier coverage — test in Firefox if you rely on them. For print-style fragmentation, also set break-inside with the legacy page-break-inside: avoid for older renderers.