The column-width
CSS property specifies the minimum column width. The number of columns will be the maximum number of columns that can fit without any column having a width less than the column-width
value. The actual column width may be smaller than the value of column-width
if the width of the container is smaller.
/* 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;
This allows you 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 value | auto |
---|---|
Applies to | Block containers except table wrapper boxes |
Inherited | no |
Media | visual |
Computed value | the absolute length, zero or larger |
Animation type | a length |
Canonical order | per grammar |
Syntax
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
<length> | auto
Examples
HTML Content
<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
.content-box { border: 10px solid #0ff; /* Chrome, Safari, Opera prefix */ -webkit-column-width: 100px; /* Mozilla Firefox prefix */ -moz-column-width: 100px; column-width: 100px; }
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 |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 50.0[1] |
(Yes)-webkit (Yes) |
1.5 (1.8)-moz 50.0 (50.0)[2] |
10 | 11.10 | 3.0 (522)-webkit |
Intrinsic sizes | No support | ? | No support | No support | No support | No support |
on display: table-caption |
(Yes) | (Yes) | 37 (37) | (Yes) | (Yes) | (Yes) |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | (Yes) | ? 50.0[1] |
(Yes)-webkit (Yes) |
1.0 (1.8)-moz 50.0 (50.0)[2] |
(Yes) | (Yes) | (Yes) | ? 50.0[1] |
Intrinsic sizes | No support | ? | ? | No support | No support | No support | No support | ? |
on display: table-caption |
(Yes) | 50.0 | (Yes) | 37.0 (37) | (Yes) | (Yes) | (Yes) | 50.0 |
[1] Unprefixed as of Chrome 50.
[2] Unprefixed as of Gecko 52, with prefixed aliases still available.
Document Tags and Contributors
Tags:
Contributors to this page:
camsteffen,
jswisher,
scholachoi,
arronei,
chrisdavidmills,
erikadoyle,
fscholz,
jpmedley,
Prinz_Rana,
corysimmons,
yisibl,
teoli,
Sebastianz,
liza_dev,
mdrburke,
jsx,
kscarfone,
Sheppy,
FredB,
ethertank,
brianloveswords,
kuvik3,
Marsf,
Jürgen Jeka,
DBaron,
BijuGC
Last updated by:
camsteffen,