CSS3 Multiple Columns
CSS3 can design the text content as a multi-column layout like a newspaper, the following example:
TutorialFish.com ! The tutorialfish.com (www.tutorialfish.com) provides the most complete basic tutorial of programming technology, and introduces the basic knowledge of various programming languages such as HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL and so on. At the same time, this site also provides a large number of online examples, through which you can learn programming better.
Browser support
The numbers in the table represent the version number of the first browser to support the method.
The -webkit- or -moz- immediately following the number is the browser-specific prefix.
Properties | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
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 Multicolumn Properties
In this chapter we will learn the following CSS3 multi-column properties:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3 create multiple columns
column-count
The property specifies the number of columns to split.
The following example divides the text in a <div> element into 3 columns:
Example
div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
Gap between columns in CSS3 multiple columns
column-gap
The property specifies the gap between columns.
The following example specifies a column-to-column gap of 40 pixels:
Example
div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; }
CSS3 column borders
column-rule-style
The property specifies the border style between columns:
Example
div { -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; }
column-rule-width
The property specifies the border thickness of the two columns:
Example
div { -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; }
column-rule-color
The property specifies the border color of the two columns:
Example
div { -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */ -moz-column-rule-color: lightblue; /* Firefox */ column-rule-color: lightblue; }
column-rule
Properties are shorthand for all properties of column-rule-*.
The following example sets the thickness, style, and color of the column's immediate border:
Example
div { -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; }
Specifies how many columns the element spans
The following example specifies that the <h2> element spans all columns:
Example
h2 { -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all; }
Specifies the width of the column
column-width
The property specifies the width of the column.
Example
div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ column-width: 100px; }
CSS3 Multicolumn Properties
The following table lists all CSS3 multicolumn properties:
Property | Description |
---|---|
column-count | Specifies the number of columns by which elements should be split. |
column-fill | specify how to populate the column |
column-gap | Specify the gap between columns |
column-rule | Shorthand for all column-rule-* properties |
column-rule-color | Specifies the color of the border between two columns |
column-rule-style | Specifies the style of the border between two columns |
column-rule-width | Specifies the thickness of the border between two columns |
column-span | Specifies how many columns the element should span |
column-width | Specifies the width of the column |
columns | Shorthand properties for column-width and column-count. |