- CSS Multi-column Layout
- CSS Multi-column Properties
- Browser Support
- CSS Create Multiple Columns
- CSS Specify the Gap Between Columns
- CSS Column Rules
- Specify How Many Columns an Element Should Span
- element should span across all columns: Example h2 { column-span: all; } Specify The Column Width
- CSS Multi-columns Properties
CSS Multi-column Layout #
The CSS multi-column layout allows easy definition of multiple columns of text – just like in newspapers:
CSS Multi-column Properties #
In this chapter you will learn about the following multi-column properties:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
#
Browser Support #
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | Internet explorer | Mozila FIrefox | Safari | Opera |
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
#
CSS Create Multiple Columns #
The column-count property specifies the number of columns an element should be divided into.
The following example will divide the text in the <div> element into 3 columns:
Example #
div {
column-count: 3;
} div {
column-gap: 40px;
} div {
column-rule-style: solid;
} The column-rule-color property specifies the color of the rule between columns:
Example #
div {
column-rule-color: lightblue;
} The column-rule property is a shorthand property for setting all the column-rule-* properties above.
The following example sets the width, style, and color of the rule between columns:
Example #
div {
column-rule: 1px solid lightblue;
} h2 {
column-span: all;
} div {
column-width: 100px;
} CSS Multi-columns Properties #
The following table lists all the multi-columns properties:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |
