In this section, we will learn what column-width property is and how to use it in CSS.

CSS column-width Property Definition and Usage

The CSS `column-width` property is used to set a minimum width for those columns that are created via `column-count` property.

Using this property means the target columns should not have a width less than the specified value. In another word, the width of columns can go higher than the value of this property but not lower!

Note: the value of this property is a suggestion for browsers and under different circumstances, browsers might ignore this value and actually put the width of columns to a value under the specified width.

CSS column-width Property Syntax

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

CSS column-width Property Value

The value of this property is a number with a CSS supported unit.

• auto: the value auto means browsers should themselves calculate the width of columns automatically.

The two global values, “initial” and “inherit” could also be used for this property.

Example: column-width property in CSS

See the Pen column-width property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS column-width Property Work?

For this example, the value of the column-width property is set to 300px, and that means the minimum width for these columns should be 300px.