column-count

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

The column-count CSS property breaks an element's content into the specified number of columns.

Try it

Syntax

/* Keyword value */
column-count: auto;

/* <integer> value */
column-count: 3;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

Values

auto: The number of columns is determined by other CSS properties, such as column-width.
<integer>: Is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

Formal definition

Initial value	`auto`
Applies to	Block containers except table wrapper boxes
Inherited	no
Computed value	as specified
Animation type	an integer

Formal syntax

column-count = 
  auto             |
  <integer [1,∞]>

Examples

Splitting a paragraph across three columns

HTML

<p class="content-box">
  This is a bunch of text split into three columns using the CSS
  <code>column-count</code>
  property. The text is equally distributed over the columns.
</p>

CSS

.content-box {
  column-count: 3;
}

Result

Specifications

Specification
CSS Multi-column Layout Module Level 1 # cc

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`column-count`	501	1212	52 1.5–74 Before version 37, multiple columns didn't work with `display: table-caption` elements.	3715	93	5018	52 4–79 Before version 37, multiple columns didn't work with `display: table-caption` elements.	3714	92	5.01.0	504.4
`auto`	1	12	1.5	15	3	18	4	14	2	1.0	4.4