CSS tutorial series: CSS Multiple Columns layout

The multicol or multi-column layout is a method for setting up content in columns, similar to a newspaper layout.
Let's learn how to use a multiple-column layout.

CSS multi-columns properties

Property	Value
column-count	accepts a number
column-gap	accepts a length unit
column-rule-style	solid, dotted, double, ridge
column-rule-width	accepts a length unit
column-rule-color	accepts a color
column-rule	accepts the three previous values, width, style and color
column-span	none, all
column-width	accepts a length unit

Let's discuss each of these properties

Column count property

This property determines the number of columns an element should be divided into. Let's say we give this property the value of 3 then this element is going to be divided into 3 columns

Column gap property

This property specifies the space between the columns.

Column-rule

By explaining column-rule-width, column-rule-style and column-rule-color, you will understand the use of column-rule.

The column-rule is shorthand for the three properties mentioned respectively.

• The first property accepts a length unit such as column-rule-width: 40px which will specify the width of the line present between the columns.

• The second property accepts a style value which will be applied to the line drawn between the columns.

• The third property accepts a color value which will also be applied to the line drawn between the columns.

Column span property

This property allows an element to span across all columns by using the value of all.

Column width property.

This property defines the minimum width of each column number that was specified using the column-count property.