Where pages break / column-count
Do CSS multi-column layouts work in a PDF
Multi-column layout flows content into columns, and in a paged context those columns fill one page before the flow continues on the next.
What it is for
Terms and conditions, indexes and reference sections are much shorter in two columns, and multi-column is the only way to get that without splitting the content by hand.
Support: Works in a browser-based render
Works, and interacts with pagination in a way worth testing rather than assuming: break-inside applies to column fragmentation as well as page fragmentation, so a rule written for one affects the other.
The syntax
Written the way it would appear in a document stylesheet, using column-count as intended.
.terms {
column-count: 2;
column-gap: 8mm;
/* Keeps each clause whole within its column. */
}
.terms > li {
break-inside: avoid;
}
/* A heading that should span both columns. */
.terms h3 {
column-span: all;
break-after: avoid;
}The mistake people make
Column balancing on the last page, which leaves a short second column. column-fill: auto fills the first column completely before starting the second, which is usually what a reference section wants.
Frequently asked
Does column-count work when generating a PDF?
Works in a browser-based render. Works, and interacts with pagination in a way worth testing rather than assuming: break-inside applies to column fragmentation as well as page fragmentation, so a rule written for one affects the other.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to force a page break before an element in a PDF
break-before. Works everywhere.
How to keep a heading with the text that follows it
break-after. Works everywhere.
page-break-inside vs break-inside: which should I use
page-break-inside. Works everywhere.
How to stop single lines being stranded across PDF pages
orphans and widows. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.