W3cubDocs

column-width

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.

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 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 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

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	50 50 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	12 12 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	50 50 1.5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	10	11.1	3 Prefixed 3 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
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 50 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Yes Yes Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	50 50 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Yes	Yes	5.0 5.0 Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-
Intrinsic sizes	No	?	?	No	No	No	?
On `display: table-caption`	Yes	50	Yes	37	Yes	Yes	5.0