CSS3 Multiple Columns Example

Using CSS3 multiple columns you can layout your text in multiple columns just like newspapers, book indexes etc. Let’s see how we can make beautiful designs using CSS3 multiple columns.

column-count CSS3 Property

To create multiple text columns you have to specify this property. This is assigned to the number of columns. The width of the columns are auto calculated based on the number of columns.

column-gap CSS3 Property

Used to specify the gap between the columns.

column-rule CSS3 Property

Its used to provide width, style and color of the rule(a line drawn to divide the columns).

Style can have the following values: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.

column-fill CSS3 Property

Using this property we can specify if the columns should have same length or sequential(different) length.

This property can be assigned to auto or balance. balance make it same length whereas auto makes it sequential. balance is the default value.

column-span CSS3 property

By default block level elements inside the content take full width of the columns not the container. We can force them to take full width of the container using this property.

It can be assigned to 1 or all. 1 is the default value.

column-width CSS3 Property

We can manually assign the width of the columns using column-width property. But its always better to make them auto calculated.

Making CSS3 Columns Responsive

We can make CSS3 columns responsive by dropping number of columns as the viewport width decreases.

Browser Support

All CSS3 supported browsers support column-count, column-width, column-gap and column-rule properties. But column-fill and column-span are yet to be supported by all browsers.