CSS3 column-fill Property

Example

Specify how to fill columns:

div
{
column-fill:auto;
}

More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The column-fill property is not supported in any of the major browsers.


Definition and Usage

The column-fill property specifies how to fill columns, balanced or not.

Default value: balance
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columnFill="auto"


Syntax

column-fill: balance|auto;

Value Description
balance Columns are balanced. Browsers should minimize the variation in column length
auto Columns are filled sequentially, and they will have different lengths


Examples

Try it Yourself - Examples

Column-count
Divide the text in a div element into three columns.

Column-gap
Divide the text in a div element into three columns, and specify a 30 pixels gap between the columns.

Column-rule
Specify the width, style and color of the rule between columns.