The column-width
CSS property sets 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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
.
Syntax
/* 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.
Values
<length>
- Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.
auto
- The width of the column is determined by other CSS properties, such as
column-count
.
Formal definition
Initial value | auto
|
Applies to | Block containers except table wrapper boxes |
Inherited | no |
Computed value | the absolute length, zero or larger |
Animation type | a length |
Formal syntax
<length> | auto
Examples
Setting column width in pixels
HTML
<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>
CSS
.content-box {
column-width: 100px;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 3The definition of 'column-width' in that specification. | Working Draft | Adds intrinsic sizes via the keywords min-content , max-content , and fit-content .
|
CSS Multi-column Layout ModuleThe definition of 'column-width' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-width
|
Chrome Full support 50 Full support 50 Full support 1 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 50 Full support 50 No support 1.5 — 74 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Prior to version 37, multiple columns didn't work with |
IE
Full support 10 |
Opera Full support 11.1 Full support 11.1 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 9 Full support 9 Full support 3 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 50 Full support 50 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 50 Full support 50 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 50 Full support 50 Full support 4 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Prior to version 37, multiple columns didn't work with |
Opera Android Full support 11.1 Full support 11.1 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 9 Full support 9 Full support 1 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit- |
Intrinsic sizes |
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- [[../../../Learn/CSS/CSS_layout/Multiple-column_Layout|Multiple-column Layout]] (Learn Layout)
- Basic Concepts of Multicol
column-width by Mozilla Contributors is licensed under CC-BY-SA 2.5.