The columns CSS property sets the column width and column count of an element.

It is a shorthand property that sets both the column-width and column-count properties in a single, convenient declaration. As with all shorthand properties, any omitted sub-values will be set to their initial value.

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

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

Values

<'column-width'>
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.
<'column-count'>
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 syntax

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

Example

HTML

<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>

CSS

.content-box {
  columns: 3 auto;
}

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'columns' in that specification.
Working Draft Initial definition.

Initial valueas each of the properties of the shorthand:
Applies toBlock containers except table wrapper boxes
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 50
Full support 50
Full support 50
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 52
Full support 52
Full support 9
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support 11.1
Full support 11.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 50Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 52
Full support 52
Full support 22
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 11.5
Full support 11.5
Full support 32
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 3.2
Prefixed
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 5.0
On display: table-captionChrome Full support YesEdge Full support YesFirefox Full support 37IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile Full support YesFirefox Android Full support 37Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.