CSS3 Multiple Column – Tutorials Art

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

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

.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.

.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:

.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:

.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;
}