May 04, 2021 CSS3
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
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 |
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:
The gap between the columns specified by the column-gap property:
Specify the 40 pixel gap between columns:
The column-rule property sets the width, style, and color between columns.
Rules that specify the width, style, and color between columns:
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 |