CSS3 multiple columns
May 04, 2021 CSS3
Table of contents
CSS3 multiple columns
CSS3 multiple columns
With CSS3, you can create multiple columns to lay out text - just like newspapers, you can collect articles and take a look when you need them.
In this chapter, you'll learn about the following multi-column properties:
-
column-count
-
column-gap
-
column-rule
- column-rule-color
- column-rule-style
- column-rule-width
-
column-width
Browser support
The numbers in the table support the version number of the first browser for this method.
Immediately after the number - webkit - or -moz - is the prefix for the specified browser.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit-
11.1 |
| column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit-
11.1 |
| column-rule | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit-
11.1 |
| column-rule-color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit
11.1 |
| column-rule-style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit
11.1 |
| column-rule-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit
11.1 |
| column-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- |
15.0 -webkit
11.1 |
CSS3 creates multiple columns
The column-count property specifies that the number of columns of an element should be divided into:
Text of div elements divided into three columns:
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
Try it out . . .
The gap between the specified columns of CSS3
The gap between the columns specified by the column-gap property:
Specify the 40 pixel gap between columns:
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
Try it out . . .
CSS3 column rules
The column-rule property sets the width, style, and color between columns.
Rules that specify the width, style, and color between columns:
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
Try it out . . .
CSS3 new multi-column properties
The following table lists the new multi-column properties for all CSS3s, and click on the properties to see more and how to use them:
| Property | Description | Css |
|---|---|---|
| column-count | Specifies the number of columns an element should be divided into | 3 |
| column-fill | Specify how the columns are populated | 3 |
| column-gap | Specify the gap between columns | 3 |
| column-rule | A short-case property for setting all column rules | 3 |
| column-rule-color | Color rules between specified columns | 3 |
| column-rule-style | The style rule between the specified columns | 3 |
| column-rule-width | The width rule between the specified columns | 3 |
| column-span | Specify how many columns an element should span | 3 |
| column-width | Specifies the width of the column | 3 |
| columns | The abbreviated property sets the column width and the number of columns | 3 |