Tóm Tắt

CSS

column-count

Property

Divide the text in the <div> element into three columns:

div
{

column-count: 3;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The column-count property specifies the number of columns an element should
be divided into.

Show demo ❯

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property

column-count
50.0
4.0 -webkit-
10.0
52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1

column-count: number|auto|initial|inherit;

Value
Description
Demo

number
The optimal number of columns into which the content of the element will be flowed
Demo ❯

auto
Default value. The number of columns will be determined by other properties, like e.g. “column-width”
Demo ❯

initial
Sets this property to its default value. Read about initial

inherit
Inherits this property from its parent element. Read about inherit

Specify a 40 pixels gap between the columns:

div
{
column-gap: 40px;
}

Try it Yourself »

Specify the width, style, and color of the rule between columns:

div
{
column-rule: 4px double #ff00ff;
}

Try it Yourself »

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnCount property