Layout
column-count
column-count sets how many columns the text in a box flows into (multi-column layout). As in a newspaper, the text continues at the top of the second column after reaching the bottom of the first.
Syntax
auto | <integer [1,∞]>Preview
Code
.box {
column-count: 2;
}Controls
About
Values
auto: no columns. This is the initial value (ifcolumn-widthis set, the number of columns comes from that width).- An integer of 1 or more: splits the content into that many columns, each an equal share of the box width.
Column height and spacing
When the box has no set height, the text is split so the columns are as close to the same height as possible (column-fill: balance). When the height is set and the text does not fit, more columns than requested are added outside the box (to the right in horizontal text).
column-gap sets the space between columns (the initial normal is 1em), and column-rule draws a line between them.
The preview on this page puts column-count on the sample text box. Drag the bottom right corner to resize it: the number of columns stays the same and their width changes.
Combining with column-width
With column-width set as well, column-count becomes the maximum number of columns. Wide screens get up to column-count columns, and narrow screens get fewer, so that no column is narrower than column-width. The columns shorthand sets both, as in columns: 12em 3.
Spanning and unbroken elements
To make an element such as a heading span all columns, set column-span: all on it. To keep an image or a box from being split across two columns, set break-inside: avoid on it.