column-width CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
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.
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.
The columns shorthand property can be used to set the column-width, column-count, and column-height property values in a single declaration.
Try it
column-width: auto;
column-width: 6rem;
column-width: 120px;
column-width: 18ch;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
#example-element {
width: 100%;
columns: auto;
text-align: left;
}
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: revert;
column-width: revert-layer;
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 | auto if specified as auto, otherwise for <length> the absolute value specified |
| Animation type | by computed value type |
Formal syntax
column-width =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
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 exercitation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
CSS
.content-box {
column-width: 100px;
}
Result
Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 1 # cw |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
column-width
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
See also
column-countcolumn-heightcolumnsshorthand- Learn: Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol