CSS Multiple Columns

Published: 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: ) 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 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:
  • Firefox 2+
  • Chrome 4+
  • Safari 3.1+
  • Opera 11.1+
  • Internet Explorer 10+

Multiple columns in web pages

Contrary to my believes I found only few websites that are somehow using multiple columns.

Panic Transmit, example of multi-column layout Panic Transmit — http://panic.com/transmit/ Added:
Information Architects, example of multi-column layout Information Architects — http://www.informationarchitects.jp/en/
Wikipedia references, example of multi-column layout Wikipedia references — http://en.wikipedia.org/wiki/Binary_search_algorithm#References
Veerle Pieters, example of multi-column layout Veerle Pieters — http://veerle.duoh.com/about
Vinski Vodič 2011, example of multi-column layout Vinski Vodič 2011 — http://online.vinskivodic.si/2011/
The Web platform: Browser technologies, example of multi-column layout The Web platform: Browser technologies — http://platform.html5.org/
Mindgarden - Marc Tobias Kunisch, example of multi-column layout http://mindgarden.de
The Multi-Column Digest, example of multi-column layout The Multi-Column Digest
Galjot, example of multi-column layout Robert Sedovšek — http://galjot.si/about
blog comments powered by Disqus