The column-width CSS property specifies the minimum column width. The number of columns will be the maximum number of columns that can fit without any column having a width less than the column-width value. The actual column width may be smaller than the value of column-width if the width of the container is smaller.

/* Keyword value */
column-width: auto;

/* Different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* Global values */
column-width: inherit;
column-width: initial;
column-width: unset;

This allows you to achieve scalable designs that fit different screen sizes. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width.


The column-span property is specified as one of the values listed below.


Is a <length> value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid.
The width of the column is determined by other CSS properties, such as column-count.

Formal syntax

<length> | auto



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


.content-box {
  column-width: 100px;



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.
Candidate Recommendation 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 compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support


Yes -webkit-


Yes -webkit-


1.5 -moz-

10 11.1 3 -webkit-
Intrinsic sizes No ? No No No No
On display: table-caption Yes Yes 37 Yes Yes Yes
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support Yes


Yes -webkit-


Yes -webkit-


4 -moz-

Yes Yes ?
Intrinsic sizes No ? ? No No No ?
On display: table-caption Yes 50 Yes 37 Yes Yes ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.