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;
}
.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
the gap between the columns.This
property is used to specify
.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
the style of the rule between columns:This
property is used to specify
.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
the color of the rule between columns:This
property is used to specify
.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; }