CSS3 multi-column

Browser support

The numbers in the table represent the version number of the first browser that supports the method.

Immediately after the number. -webkit- or -moz- specifies the prefix for the browser.

CSS3 multi-column properties

In this section, we will learn about the following multi-column properties of CSS3:

• column-count

• column-gap

• column-rule-style

• column-rule-width

• column-rule-color

• column-rule

• column-span

• column-width

CSS3 creates multiple columns

column-count property specifies the number of columns to be split.

The following example will <div> the text in the element is divided into three columns:

Example

div{
    -webkit-column-count:3; /\* Chrome, Safari, Opera \*/
    -moz-column-count:3; /\* Firefox \*/
    column-count:3;
}

The gap between columns in CSS3 multiple columns

column-gap property specifies the gap between columns.

The following example specifies that the gap between columns is 40 pixels:

Example

div{
    -webkit-column-gap:40px; /\* Chrome, Safari, Opera \*/
    -moz-column-gap:40px; /\* Firefox \*/
    column-gap:40px;
}

CSS3 column border

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;
}

column-rule-width property specifies the border thickness of 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 property specifies the border color of two columns:

Example

div{
    -webkit-column-rule-color:lightblue; /\* Chrome, Safari, Opera \*/
    -moz-column-rule-color:lightblue; /\* Firefox \*/
    column-rule-color:lightblue;
}

The column-rule property is column-rule-\* abbreviations for all attributes.

The following example sets the thickness, style, and color of the direct border of the column:

Example

div{
    -webkit-column-rule:1px solid lightblue; /\* Chrome, Safari, Opera
\*/
    -moz-column-rule:1px solid lightblue; /\* Firefox \*/
    column-rule:1px solid lightblue;
}

Specify how many columns the element spans

The following example specifies <h2> element spans all columns:

Example

h2{
    -webkit-column-span:all; /\* Chrome, Safari, Opera \*/
    column-span:all;
}

Specify the width of the column

column-width property specifies the width of the column.

div{
    -webkit-column-width:100px; /\* Chrome, Safari, Opera \*/
    column-width:100px;
}

CSS3 multi-column properties

The following table lists the multi-column properties of all CSS3: