CSS Multiple Columns

Published: 30^th of March, 2012

This article is about CSS Multi-column Layout module which allows content to flow into multiple columns with a gap and a rule between them. There is also a short list (updated: 13^th of May, 2012) of websites that are currently using multiple columns in their layout.

While reading long lines of text on a wider screens it is easy to lose track of which line you were on. The CSS Multi-column module offers a technique for long chunks of text to wrap to multiple columns, which is widely popular in editorial design of magazines and newspapers.
W3C Specification: CSS Multi-column Layout Module

Implementation

To apply multiple columns to a particular element, block container of text, we specify either the width of a column column-width: <length unit> (the exact number of columns will depend on the avaliable space), or the number of columns column-count: <integer>.

element {
    column-width: <length unit> | auto; // or
    column-count: <integer> | auto;
}

Column gaps and rules

The example below describe gaps and rules between columns.

element {
    column-gap: <length unit> | normal;

    column-rule-color: <color>;
    column-rule-style: <border-style>;
    column-rule-width: <border-width>;

    /* shorthand property */
    column-rule: <color> <border-style> <border-width>;
}

Column breaks

We can control column breaks, that is how the content displays within each column, using properties break-before, break-after or break-inside. Normally we do not want widows and orphans left dangling at the top or bottom of a column, separated from the rest of the paragraph.

Column span

You can also use the 'column-span' property, which make the child element (spanning element) span the whole set of columns, when the property is set to: all.

element {
    /* none: The element does not span multiple columns. */
    /* all: The element spans across all columns. */
    column-span: none | all;
}

This is how it would look:
Display of column-span

Filling columns

Content within columns is balanced by default, column-fill: balance, or can be filled with content sequentially, column-fill: auto, and some columns may end up partially filled, or with no content at all.

Browser support

In terms of browser support, multiple columns are pretty much supported in every major browser, except in Internet Explorer 9 and lower, but they degrade well into single column, which is not bad at all.

But as far as I've tested, only few browsers currently support properties besides column-width or column-count, which gives us little to no control over breaks and columns fills and no chance to span element across columns in other browsers.

Supported by: