CSS columns Property Tutorial

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.


Top Technologies