`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 March 2017.

The column-width CSS property sets the ideal column width in a multi-column layout.

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;

Values

This property is specified as one of the following 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.

Description

The column-width property specifies the preferred 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 column-width property, along with the column-height and column-count properties, can also be set by using the columns shorthand.

Formal definition

Initial value	auto
Applies to	Block containers except table wrapper boxes
Inherited	no
Computed value	<code>auto</code> if specified as <code>auto</code>, otherwise for `<length>` the absolute value specified
Animation type	by computed value type

Formal syntax

column-width = 
  auto |
  <length [0,∞]>

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 Multi-column Layout Module Level 2 # propdef-column-width

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`column-width`	50 1	12 12	50 1.5–74 Before version 37, multiple columns didn't work with `display: table-caption` elements.	11.1 15	9 3	50 18	50 4 Before version 37, multiple columns didn't work with `display: table-caption` elements.	11.1 15	9 1	5.0 1.0	50 4.4	9 1
`auto`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2