/* Keyword value */ column-count: auto;  /* <integer> value */ column-count: 3;  /* Global values */ column-count: inherit; column-count: initial; column-count: revert; column-count: unset; 

column-count

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

Syntax

/* Keyword value */ column-count: auto;  /* <integer> value */ column-count: 3;  /* Global values */ column-count: inherit; column-count: initial; column-count: revert; column-count: unset; 

Values

The number of columns is determined by other CSS properties, such as column-width.

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

Formal syntax

<integer> | auto

Examples

Splitting a paragraph across three columns

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

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

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors