W3cubDocs

/CSS

column-width

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.

Try it

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: 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 the absolute length, zero or larger
Animation type a length

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
column-width 501 1212 50
1.5–74Before version 37, multiple columns didn't work with display: table-caption elements.
10 1511.1 93 50≤37 5018 50
4Before version 37, multiple columns didn't work with display: table-caption elements.
1511.1 91 5.01.0
intrinsic_sizes
NoSee bug 964183.
NoSee bug 964183.
No No
NoSee bug 964183.
No
NoSee bug 964183.
NoSee bug 964183.
No
NoSee bug 964183.
No
NoSee bug 964183.

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-width