The CSS multi-column layout simplifies the creation of newspaper-like multiple columns of text.
In this chapter, you’ll explore the various multi-column properties, including:
The numbers in the table indicate the initial browser version that offers complete support for the property.
The column-count property determines the number of columns that an element should be segmented into.
In the following example, the text within the <div> element will be divided into 3 columns:
Example
|
div { |
The column-gap property defines the space between columns.
In the following example, a gap of 40 pixels is set between the columns:
Example
| div { column-gap: 40px; } |
| div { column-rule-style: solid; } |
The column-rule-width property determines the thickness of the rule positioned between columns.
Example
| div { column-rule-width: 1px; } |
The column-rule-color property determines the color of the rule positioned between columns.
Example
| div { column-rule-color: lightblue; } |
The column-rule property serves as a shorthand for configuring all the column-rule-* properties mentioned earlier.
In the following example, the width, style, and color of the rule between columns are set:
Example
| div { column-rule: 1px solid lightblue; } |
The column-span property determines the number of columns an element should encompass.
In the following example, it specifies that the <h2> element should span across all columns:
Example
| h2 { column-span: all; } |
The column-width property indicates an ideal width recommended for the columns.
In the following example, it specifies that the suggested optimal width for the columns should be 100 pixels:
Example
| div { column-width: 100px; } |
