CSS Multiple Columns
CSS Multi-column Layout
Similar to how numerous columns of text are defined in newspapers, the CSS multi-column layout makes this possible:
CSS Multi-column Properties
In this chapter you will learn about the following multi-column properties:
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Create Multiple Columns
The amount of columns into which an element should be divided is specified by the column-count property.
The text within the <div> element will be split into three columns in the example that follows:
Example
div {
column-count: 3;
}
CSS Specify the Gap Between Columns
The space between the columns is specified by the column-gap property.
The sample that follows indicates a 40-pixel spacing between the columns:
Example
div {
column-gap: 40px;
}
CSS Column Rules
The style of the rule between columns is specified by the column-rule-style property:
Example
div {
column-rule-style: solid;
}
The width of the rule between columns is specified by the column-rule-width property:
Example
div {
column-rule-width: 1px;
}
The color of the rule in between columns is specified by the column-rule-color property:
Example
div {
column-rule-color: lightblue;
}
Setting each of the aforementioned column-rule-* properties may be done quickly and easily with the column-rule property.
The width, style, and color of the rule between columns are set in the following example:
Example
div {
column-rule: 1px solid lightblue;
}
Specify How Many Columns an Element Should Span
The number of columns that an element should stretch across is specified by the column-span property.
The example that follows indicates that the <h2> element must extend to all columns:
Example
h2 {
column-span: all;
}
Specify The Column Width
The recommended, ideal width for the columns is specified by the column-width parameter.
The recommended, ideal width for the columns, as demonstrated in the example below, is 100 pixels:
Example
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 |
