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.