CSS3 Multiple Column

CSS3 Multiple Column is used for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.

CSS3 Multiple Column-properties

1column-count This property is used to count the number of columns that element should be divided.
2column-fill This property is used to decide, how to fill the columns.
3column-gap This property is used to decide the gap between the columns.
4column-rule This property is used to specify the number of rules.
5rule-color This property is used to specify the column rule color.
6rule-style This property is used to specify the style rule for column.
7rule-width This property is used to specify the width.
8column-span This property is used to specify the span between columns.

column count

This property is used to specify the number of columns an element should be divided into.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.newspaper {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.newspaper { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
.newspaper {
    -webkit-column-count: 4; 
    -moz-column-count: 4;
    column-count: 4;
}

column gap

This property is used to specify the gap between the columns.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.newspaper {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
}
.newspaper { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; }
.newspaper {
    -webkit-column-count: 4; 
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 50px; 
    -moz-column-gap: 50px;
    column-gap: 50px;
}

column rule style

This property is used to specify the style of the rule between columns:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.newspaper {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
.newspaper { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
.newspaper {
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4;
    -webkit-column-gap: 50px; 
    -moz-column-gap: 50px; 
    column-gap: 50px;
    -webkit-column-rule-style: solid; 
    -moz-column-rule-style: solid;
    column-rule-style: solid;
}

column-rule-color

This property is used to specify the color of the rule between columns:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.newspaper {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 3px;
-moz-column-rule-width: 3px;
column-rule-width: 3px;
-webkit-column-rule-color: red;
-moz-column-rule-color: red;
column-rule-color: red;
}
.newspaper { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; -webkit-column-rule-color: red; -moz-column-rule-color: red; column-rule-color: red; }
.newspaper {
    -webkit-column-count: 4; 
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 50px; 
    -moz-column-gap: 50px; 
    column-gap: 50px;
    -webkit-column-rule-style: solid; 
    -moz-column-rule-style: solid; 
    column-rule-style: solid;
    -webkit-column-rule-width: 3px; 
    -moz-column-rule-width: 3px; 
    column-rule-width: 3px;
    -webkit-column-rule-color: red; 
    -moz-column-rule-color: red;
    column-rule-color: red;
}