CSS Introduction | CSS3 Extensions | Multi-Column Layout
Multi-Column Layout
In CSS, you can easily create a structure made up of several columns, like a newspaper, by using column properties.
The properties provided for multi-column layouts are as follows.
| property | description |
|---|---|
| columns | Sets styles using all columns properties in one line. |
| column-count | Sets how many columns the element should be divided into. |
| column-gap | Sets the spacing between columns. |
| column-width | Sets the width of the columns. |
| column-span | Sets how many columns the element should span when displayed. |
| column-fill | Sets how columns are filled. |
| column-rule | Sets styles using all column-rule properties in one line. |
| column-rule-style | Sets the style of the line between columns. |
| column-rule-width | Sets the thickness of the line between columns. |
| column-rule-color | Sets the color of the line between columns. |
CSS3 Multi-Column Support Versions
The major web browser versions that support CSS3 multi-column layouts are as follows. The table also lists the first versions that supported this feature through vendor prefixes.
| property | ie | chrome | firefox | safari | opera |
|---|---|---|---|---|---|
| column-count / column-gap / column-rule/ column-rule-color / column-rule-style / column-rule-width / column-width | 10.0 | 50.0 / 4.0 -webkit- | 2.0 -moz- | 9.0 / 3.1 -webkit- | 37.0 / 15.0 -webkit- / 11.1 |
| column-span | 10.0 | 50.0 / 4.0 -webkit- | Not supported | 9.0 / 3.1 -webkit- | 37.0 /15.0 -webkit-/ 11.1 |
column-count Property
The column-count property sets how many columns the element should be divided into.
<style>
#origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>
column-gap Property
The column-gap property sets the spacing between columns.
<style>
#gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>
column-width Property
The column-width property sets the width of the columns. After creating columns with the set width, the web browser divides the remaining area evenly and automatically sets it as the spacing between columns.
<style>
#gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>
column-span Property
The column-span property sets how many columns the element should merge and span when displayed.
<style>
#merge { -webkit-column-span: all; column-span: all; }
</style>
The column-count property is not supported in Firefox, Internet Explorer 9, or earlier versions.
column-rule-style Property
The column-rule-style property sets the style of the line between columns.
<style>
#line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>
column-rule-width Property
The column-rule-width property sets the thickness of the line between columns.
<style>
#line {
-webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
}
</style>
column-rule-color Property
The column-rule-color property sets the color of the line between columns.
<style>
#line {
-webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
-webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
}
</style>
column-rule Property
You can set styles using all column-rule properties in one line.
<style>
#line {
-webkit-column-rule: 5px solid #6495ED;
-moz-column-rule: 5px solid #6495ED;
column-rule: 5px solid #6495ED;
}
</style>