YouTip` element into 3 columns:
### Example
div {
-webkit-column-count: 3;/* Chrome, Safari, Opera */
-moz-column-count: 3;/* Firefox */
column-count: 3;
}
[Try it »](
* * *
## The Gap Between Columns in CSS3 Multiple Columns
The `column-gap` property specifies the gap between columns.
The following example sets the gap between columns to 40 pixels:
### Example
div {
-webkit-column-gap: 40px;/* Chrome, Safari, Opera */
-moz-column-gap: 40px;/* Firefox */
column-gap: 40px;
}
[Try it »](
* * *
## CSS3 Column Borders
The `column-rule-style` 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;
}
[Try it »](
The `column-rule-width` property specifies the thickness of the borders between columns:
### Example
div {
-webkit-column-rule-width: 1px;/* Chrome, Safari, Opera */
-moz-column-rule-width: 1px;/* Firefox */
column-rule-width: 1px;
}
[Try it »](
The `column-rule-color` property specifies the color of the borders between columns:
### Example
div {
-webkit-column-rule-color: lightblue;/* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue;/* Firefox */
column-rule-color: lightblue;
}
[Try it »](
The `column-rule` property is a shorthand for all `column-rule-*` properties.
The following example sets the thickness, style, and color of the borders between columns:
### Example
div {
-webkit-column-rule: 1px solid lightblue;/* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue;/* Firefox */
column-rule: 1px solid lightblue;
}
[Try it »](
* * *
## Specifying How Many Columns an Element Should Span
The following example specifies that the `
Css3 Multiple Columns
CSS3 allows you to design text content into a multi-column layout, similar to a newspaper, as shown in the following example:
- We teach not just technology, but also dreams! (www.) provides the most comprehensive introductory tutorials on programming technologies, covering the basics of HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, and many other programming languages. At the same time, this site also offers numerous online examples, allowing you to learn programming more effectively through practical exercises.
* * *
## Browser Support
The numbers in the table indicate the version number of the first browser that supports the respective property.
The `-webkit-` or `-moz-` suffix immediately following the number 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 Multiple Columns Properties
In this section, we will learn about the following CSS3 multiple columns properties:
* `column-count`
* `column-gap`
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`
* `column-rule`
* `column-span`
* `column-width`
* * *
## CSS3 Creating Multiple Columns
The `column-count` property specifies the number of columns into which the content should be divided.
The following example divides the text within a `