<pre class="brush: css notranslate"><code><span class="token comment">/ Column width /</span> <span class="token property">columns</span><span class="token punctuation">:</span> 18em<span class="token punctuation">;</span> <span class="token comment">/ Column count /</span> <span class="token property">columns</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token comment">/ Both column width and count /</span> <span class="token property">columns</span><span class="token punctuation">:</span> 2 auto<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> auto 12em<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> auto auto<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">columns</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">columns</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

columns

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* 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: unset; 

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

Values

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

Formal syntax

<'column-width'> || <'column-count'>

Examples

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. </p> 

.content-box {   columns: 3 auto; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors