Multi-column CSS splits one content flow into successive column boxes. Content continues from one column into the next, so the visual order follows the source order.
Make this comfortable
CSS multi-column layout: fragment long text without breaking meaning
How the rule works
A compact policy appendix may read well in two columns on a wide print page. Give the column a minimum useful width and allow the browser to choose the count; then prevent a short heading from being left alone at a column end. Keep the appendix's paragraphs and headings in their original document order. Independent case cards should use grid instead: multicolumn would make their contents fragment and reorder reading visually in ways readers do not expect. Column balancing and fragmentation depend on actual content, page size, and font metrics. Inspect a short appendix, a long appendix, and one with a large figure. When content must stay together, break-inside is a hint to test, not a guarantee for every printer.
.policy-appendix { columns: 18rem 2; column-gap: 2rem; }
.policy-appendix h2 { break-after: avoid; }
.policy-appendix figure { break-inside: avoid; }
@media (max-width: 42rem) {
.policy-appendix { columns: 1; }
}Cost and verification
Column layout performs fragmentation work, which can be more expensive than a single text block when content changes frequently. For a static appendix, readability is the deciding factor. The code collapses to one column on a narrow screen, but a print stylesheet should still be checked separately because paper width and margins differ from a screen viewport. Do not hide overflow to force a clean edge: a missing sentence is worse than a ragged column. The browser may balance columns, so compare the resulting order with the source text before shipping.
Common Mistakes
- Do not use columns for unrelated interactive cards.
- Do not assume break-inside is honored in every print context.
- Do not clip overflowing text to make column heights match.
Connected lessons
css
layout
web