CSS3 Multiple Columns
With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:
- column-count
- column-gap
- column-rule
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| column-count | -moz- | -webkit- | -webkit- | ||
| column-gap | -moz- | -webkit- | -webkit- | ||
| column-rule | -moz- | -webkit- | -webkit- | ||
Internet Explorer and Opera do not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into:
    ExampleDivide the text in a div element into three columns:
Try it yourself » |
CSS3 Specify the Gap Between Columns
The column-gap property specifies the gap between the columns:
ExampleSpecify a 40 pixels gap between the columns:
Try it yourself » |
CSS3 Column Rules
The column-rule property sets the width, style, and color of the rule between columns.
ExampleSpecify the width, style and color of the rule between columns:
Try it yourself » |
New Multiple Columns Properties
| Property | Description | CSS |
|---|---|---|
| column-count | Specifies the number of columns an element should be divided into | 3 |
| column-fill | Specifies how to fill columns | 3 |
| column-gap | Specifies the gap between the columns | 3 |
| column-rule | A shorthand property for setting all the column-rule-* properties | 3 |
| column-rule-color | Specifies the color of the rule between columns | 3 |
| column-rule-style | Specifies the style of the rule between columns | 3 |
| column-rule-width | Specifies the width of the rule between columns | 3 |
| column-span | Specifies how many columns an element should span across | 3 |
| column-width | Specifies the width of the columns | 3 |
| columns | A shorthand property for setting column-width and column-count | 3 |
No comments:
Post a Comment