The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Choose an optimal column width | .story { column-width: 18rem; } | View examples |
| Request a column count | .story { column-count: 3; } | View examples |
| Use the columns shorthand | .story { columns: 18rem; } | View examples |
| Cap responsive columns | .story { columns: 3 18rem; } | View examples |
| Set the column gutter | .story { column-gap: 2rem; } | View examples |
| Draw a column rule | .story { column-rule: 1px solid #94a3b8; } | View examples |
| Keep a figure together | figure { break-inside: avoid; } | View examples |
| Start a new column | .new-topic { break-before: column; } | View examples |
| Protect paragraph starts | p { orphans: 3; } | View examples |
| Protect paragraph endings | p { widows: 3; } | View examples |
| Span every column | .story > h2 { column-span: all; } | View examples |
| Balance column heights | .story { column-fill: balance; } | View examples |
| Fill columns sequentially | .story { column-fill: auto; } | View examples |
| Disable columns in tight viewports | @media (max-width: 42rem) { .story { columns: auto; } } | View examples |
| Contain replaced content | .story img { max-inline-size: 100%; block-size: auto; } | View examples |
Multi-column layout fragments one continuous, source-ordered flow into adjacent columns. It is well suited to articles, glossaries, and compact lists where readers naturally continue from one column to the next; use Grid or Flexbox when each child is an independently placed component. Prefer an optimal column width over a rigid count, avoid viewport-tall columns that force horizontal navigation, and verify reflow at high zoom.
Step by step
Detailed examples
Choose responsive widths before fixed counts
A non-auto column-width or column-count establishes a multi-column container, but its descendants remain one normal-flow sequence. column-width is an optimal inline size: the user agent determines how many columns fit, then may widen them to use the container. A count alone fixes the requested number while allowing widths to vary. When both values are supplied, the count is a maximum; this makes columns: 3 18rem a useful bounded pattern. Remember that the columns shorthand resets an omitted component to auto.
.article-copy {
columns: 18rem;
column-gap: 2rem;
}.reference-list {
columns: 3 16rem;
column-gap: 1.5rem;
}Separate columns without changing their geometry
column-gap creates the gutter used in the column-sizing calculation. Its normal value resolves to 1em in a multi-column formatting context, but an explicit gap usually makes the reading path clearer. A column rule is painted in the center of the gap and does not take up space, so a rule wider than its gap can overlap content. Keep rules subtle, preserve sufficient contrast where they communicate separation, and do not expect individual anonymous column boxes to accept backgrounds or borders.
.story {
columns: 20rem;
column-gap: 2.5rem;
column-rule: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}Guide breaks without assuming every request can win
Multi-column content is fragmented, so break-before, break-after, and break-inside use the same model as paged media. Forced breaks take precedence over avoid requests, and a user agent may still split a large box that cannot fit in a column. Apply break-inside: avoid to compact figures, callouts, or short code samples rather than every element. widows and orphans express minimum line counts around paragraph breaks, but engines may relax constraints when space is insufficient.
.story figure,
.story .callout {
break-inside: avoid;
}
.story p {
orphans: 3;
widows: 3;
}
.story .new-topic {
break-before: column;
}Use spanning headings to reset the reading rhythm
column-span: all takes an in-flow block out of the current row of columns, spans the multi-column container, and creates new column rows before and after it. This is useful for major headings, but frequent spanners repeatedly rebalance content and make the reading path harder to follow. A user agent can decline to span when constrained space cannot accommodate the element, so the document must remain understandable in source order.
.story {
columns: 3 18rem;
}
.story > h2 {
column-span: all;
margin-block: 2rem 0.75rem;
}Avoid constrained-height columns for ordinary screen reading
column-fill defaults to balance, so an auto-sized continuous container attempts approximately equal column heights. auto fills columns sequentially and is mainly observable when a height, block-size, or fragmentation context constrains them. On screens, a fixed block size can generate overflow columns in the inline direction, forcing readers to scroll sideways and then back to continue. Reserve that pattern for controlled presentations; let long articles grow in the block direction and test zoom, reflow, keyboard navigation, and font substitution.
.story {
columns: 3 18rem;
block-size: auto;
column-fill: balance;
}.presentation-notes {
columns: 3 16rem;
block-size: 24rem;
column-fill: auto;
overflow: auto;
}Note: Use bounded multi-column panels only when their two-dimensional navigation has been tested with keyboard, zoom, and assistive technology.
Make wide descendants fit the anonymous column box
Each column box establishes an independent block formatting context, and ordinary content fragments into the next column in the block direction. Unbreakable strings and replaced content can still overflow visibly in the inline direction. Constrain images and video to max-inline-size: 100%, allow code and URLs to wrap or scroll intentionally, and remember that absolutely positioned descendants use a containing block established by the multi-column container—not an individual column box.
.story img,
.story video {
display: block;
max-inline-size: 100%;
block-size: auto;
}
.story code {
overflow-wrap: anywhere;
}Preserve source order and a short visual reading path
Screen readers, copy operations, focus navigation, and search engines follow document order, not a manually imagined visual column order. Write one meaningful sequence and let multi-column layout fragment it; never reorder fragments with duplicated markup. A width-driven layout naturally collapses toward one column, but a media query can disable columns earlier when the viewport, zoom level, line length, or content language makes cross-column scanning uncomfortable.
.story {
columns: 3 18rem;
}
@media (max-width: 42rem) {
.story { columns: auto; }
}Local code tester
Explore responsive article columns
Change the optimal width, maximum count, gutter, rule, and break controls while preserving the article's source order.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
- World Wide Web ConsortiumCSS Multi-column Layout Module Level 1w3.org
- World Wide Web ConsortiumCSS Multi-column Layout Module Level 2w3.org
- World Wide Web ConsortiumCSS Fragmentation Module Level 3w3.org
- World Wide Web ConsortiumCSS Box Alignment Module Level 3w3.org
- World Wide Web Consortium Web Accessibility InitiativeUnderstanding Success Criterion 1.4.10: Refloww3.org
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.