In this section, we will learn what columns property is and how to use it in CSS.
CSS columns Property Definition and Usage
The CSS `columns` property is a shorthand property and is used to set the values for the following properties in one declaration:
CSS columns Property Syntax
columns: column-width column-count;
CSS columns Property Value
This property takes two values:
- The first value defines the minimum width of the created columns.
- The second value defines the number of columns to be created.
Both values are optional and, if ignored, the default value will be used instead.
By default, they set the value of this property to “auto”.
Also, the two global values “initial” and “inherit” could be used for this property.
Example: columns property in CSS
See the Pen columns property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS columns Property Work?
In this example, the value of the `columns` property is set to “300px 3” which means the <div> element should have 3 columns with the minimum width of 300px for each column.
