We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The column-width CSS property specifies the ideal column width in a multi-column layout. If the width of the container is narrower than the specified value, the actual column width may be smaller. The container will have as many columns as can fit without any of them having a width less than the column-width value.

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.
auto
The width of the column is determined by other CSS properties, such as column-count.

Formal syntax

<length> | auto

Example

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 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.
Working Draft Initial definition.

Initial valueauto
Applies toBlock containers except table wrapper boxes
Inheritedno
Mediavisual
Computed valuethe absolute length, zero or larger
Animation typea length
Canonical orderper grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

50

Yes -webkit-

12

12 -webkit-

50

1.5 -moz-

1011.13 -webkit-
Intrinsic sizes No ? No No No No
On display: table-caption Yes Yes37 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes

50

Yes -webkit-

Yes

Yes -webkit-

50

4 -moz-

Yes Yes

5.0

Yes -webkit-

Intrinsic sizes No ? ? No No No ?
On display: table-caption Yes50 Yes37 Yes Yes5.0