CSS - column-width

The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns. This allows us to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.

Examples

HTML Content

HTML
<div class="content-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

CSS Content

CSS
.content-box {
  border: 10px solid #0ff;

  /* Chrome, Safari, Opera prefix */
  -webkit-column-width: 100px;

  /* Mozilla Firefox prefix */
  -moz-column-width: 100px;

  column-width: 100px;
}

Syntax  

CSS
/* Keyword value */
column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;

Values

<length>
Is a <length> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
auto
Is a keyword indicating that the width of the column should be determined by other CSS properties, like column-count.

Formal syntax

CSS
<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto

Description  

The column-width CSS property suggests an optimal column width. The column-width is the maximum width a column will become before adding another column. For instance, a 300px column width a gap of 0px would be a single column at 599px, but at 600px it would be split into 2 columns. This allows us to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.

Initial valueauto
Applies tonon-replaced block elements (except table elements), table-cell or inline-block elements
Inheritedno
Mediavisual
Computed valuethe absolute length, zero or larger
Animatableyes, as a length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 1.5 (1.8)-moz 10 11.10 3.0 (522)-webkit
Intrinsic sizes No support No support No support No support No support
on display: table-on, display: table-caption (Yes) 37 (37) (Yes) (Yes) (Yes)
Unprefixed 50.0        
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) ? 1.0 (1.8)-moz (Yes) (Yes) (Yes) ?
Intrinsic sizes No support ? No support No support No support No support ?
on display: table-on, display: table-caption (Yes) 50.0 37.0 (37) (Yes) (Yes) (Yes) 50.0

Specifications  

Specification Status Comment
CSS Writing Modes Module Level 3
The definition of 'column-width' in that specification.
Candidate Recommendation Adds intrinsic sizes via the keywords min-content, max-content, fill-available and fit-content.
CSS Multi-column Layout Module
The definition of 'column-width' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/column-width

CSS CSS Multi-columns CSS Property Reference