W3cubDocs

/CSS

columns

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 value as each of the properties of the shorthand:
Applies to Block containers except table wrapper boxes
Inherited no
Media visual
Computed value as each of the properties of the shorthand:
Animation type as each of the properties of the shorthand:
Canonical order per grammar

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 50
50
50
Prefixed
Prefixed Requires the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
52
52
9
Prefixed
Prefixed Requires the vendor prefix: -moz-
10 11.1
11.1
15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
3
Prefixed
3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
On display: table-caption Yes Yes 37 Yes Yes Yes
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes
Yes
2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
50 Yes
Yes
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
52
52
22
Prefixed
Prefixed Requires the vendor prefix: -moz-
11.5
11.5
32
Prefixed
Prefixed Requires the vendor prefix: -webkit-
3.2
Prefixed
3.2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
5.0
On display: table-caption Yes ? Yes 37 Yes Yes ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/columns