CSS column-width Property

CSS column-width property specifies the width of the columns in a multi-column layout.

As the multi-column layout is responsive in nature. Therefore, the column-width property basically specifies the min-width of the columns, not the width.

For example, if we use column-width: 200px;, it means that each column will be at least 200px wide and maybe wider than 200px depending on the available space. But, if the available space is less than 200px, there will be only one column that will be restricted to fit in the available space. See the example below:


  column-width: 200px;

CSS Syntax

The column-width property has the following syntax:

column-width: auto|length|initial|inherit;

Property Values

The column-width property accepts the following values:

autoThis is the default value. The browser itself decides the width of the columns.
lengthSets the width of the columns in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the column-width property to its default value(auto).
inheritInherits the column-width property from the parent element.

General Info

Default Valueauto
JavaScript Usageelement.style.columnWidth = “200px”