The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:


/* Column width */
columns: 18em;

/* Column count */
columns: auto;
columns: 2;

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

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

The columns property may be specified as one or two of the values listed below, in any order.



The ideal column width, defined as a <length> or the keyword auto. The actual width may be wider or narrower to fit the available space. See column-width.


The ideal number of columns into which the element's content should be flowed, defined as an <integer> or the keyword auto. If neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. See column-count.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toBlock containers except table wrapper boxes
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Formal syntax

columns = 
<'column-width'> ||

<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )

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

<length-percentage> =
<length> |


Setting three equal columns


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


.content-box {
  columns: 3 auto;



CSS Multi-column Layout Module Level 1
# columns

Browser compatibility

BCD tables only load in the browser

See also