CSS3 Multiple Columns

The CSS3 multi-column is use to divide a column into multiple columns like in newspapers.

Attribute	Description
column-count	specifies the number of columns an element should be divided
column-gap	specifies the gap between the columns.
column-rule-style	specifies the style of the rule between columns
column-rule-width	specifies the width of the rule between columns
column-rule-color	specifies the color of the rule between columns
column-rule	shorthand property for setting the width, style, and color of the rule between columns
column-span	specifies how many columns an element should span

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

Output:

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;

Output:

CSS3 Column Style

The column-rule-style property specifies the style of the rule between columns.

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid; 

-webkit-column-rule-width: 10px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 10px; /* Firefox */
column-rule-width: 10px;
    
-webkit-column-rule-color: red; /* Chrome, Safari, Opera */
-moz-column-rule-color: red; /* Firefox */
column-rule-color: red;  

Output:

column-span property

The column-span property specifies how many columns an element should span.

-webkit-column-span: all; /* Chrome, Safari, Opera */
-moz-column-span: all;
column-span: all;

Output: