The column-width
CSS property specifies the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width
value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the column-count
property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are width
, column-width
, column-gap
, and column-rule-width
.
/* Keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* Global values */ column-width: inherit; column-width: initial; column-width: unset;
The column-width
property is specified as one of the values listed below.
<length>
auto
column-count
.<length> | auto
<p 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. </p>
.content-box { column-width: 100px; }
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Level 4 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. | Working Draft | Initial definition. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 50
|
12
|
50
|
10 | 11.1 | 3
|
Intrinsic sizes | No | ? | No | No | No | No |
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 | 50
|
Yes
|
50
|
Yes | Yes | 5.0
|
Intrinsic sizes | No | ? | ? | No | No | No | ? |
On display: table-caption
|
Yes | 50 | Yes | 37 | Yes | Yes | 5.0 |
© 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/column-width