An (Almost) Complete Guide to CSS3 Multi-column Layouts
One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.
W3C Specification: http://www.w3.org/TR/css3-multicol/Browser Specific Support
WebKit support: Strong
Firefox support: Strong
IE9 support: NoneThe multi-column model
The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.
Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.
At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.The number and width of columns
column-widthare the two most basic ways to define the properties of a multi-column element.
column-countis set to
auto. This means that if we explicitly define the
column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:
As I mentioned, we can define
column-widthwithout defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define
column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).
Of course, we can always combine
All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.
But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).column-gap
The WC3 specification defines
1emas the default
column-gapvalue, so we’ll use it in this example:
Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule:
column-rule-color, but we can use the shorthand
column-ruleto declare values for all three at once.
As you might have guessed, the regularly available units, styles, and color values can all be used:
What if I want to break the column before ancolumn-break
h3tag, you ask? Well, that’s easy too. CSS3 gives us the
column-breakproperty with a number of possible related properties and values, including:
auto, always, avoid, left, right, page, column, avoid-page,and
So if we want to break the content before every
h3tag we simply include the
column-break-beforeproperty in our stylesheet:
If we want an element, say a headline, to span across multiple columns we can make use of the newcolumn-span
column-spanhas two possible values:
all, and regular numbers (e.g.
allmeans that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:
Just like print design, we might want some finer control over how columns are filled with content. CSS3 introducescolumn-fill
column-fillto give us that kind of control.
We can either define a value of
balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.
To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).
Introducing the CSS3 Multi-Column Module by Cedric Savarese
Remembering: The CSS3 Multi-Column Layout Module by Web Designer Notebook
Director of Human/Machine Synthesis