columns

columns is a shorthand that sets the column width (column-width) and the number of columns (column-count) of a multi-column layout together. In one declaration such as columns: 12em 3, it gives the ideal column width and the maximum number of columns.

Syntax

[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

Presets

Drag the bottom-right corner to resize

Shorthand breakdown

columns

4emcolumn-width

3column-count

autocolumn-heightomitted → initial

Code

.box {
  columns: 4em 3;
}

Controls

column-width4em

column-count3

/ column-heightauto

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Values

A length: becomes column-width (the ideal column width). Percentages and negative values are not allowed.
An integer of 1 or more: becomes column-count (the number of columns).
auto: sets one of the two to auto, depending on where it is written. columns: auto sets both to auto, so there are no columns.

The length and the integer can come in either order. If only one is written, the other is set to its initial value, auto. columns: 2 means column-width: auto and column-count: 2.

With both set

The browser adds columns as long as none gets narrower than column-width, up to the column-count limit. A wide box gets column-count columns, a narrower one gets fewer, and a box narrower than column-width gets a single column. The preview on this page puts columns on the sample text box. Drag the bottom right corner to resize it and watch the number of columns change.

Column height after the slash

CSS Multi-column Layout Module Level 2 lets you add column-height after a slash, as in columns: 12em / 8em. Text that does not fit in that height continues in a new row of columns below instead of adding more columns to the side (the initial column-wrap value, auto, behaves this way when a column height is set).

column-height works in Chrome and Edge 145 and later. Firefox and Safari drop the whole declaration when it contains a slash, so there are no columns at all.

Watch out

columns resets the part you leave out to auto. To keep a column-count written earlier, give both values in columns or write column-count after columns. In browsers that support column-height, columns also resets column-height and column-wrap.
The gap between columns (column-gap) and the line between them (column-rule) are not part of columns. Write them separately.

References

MDN Web Docscolumns SpecificationCSS Multi-column Layout Module Level 2 Can I usecolumns