Go column-crazy!

With the CSS columns property we can create mult-column layouts. And we don't mean the kind that you have to create a separate div for every column, and you'd never quite get the right balancing — regardless of the home-grown tricks you were using. With CSS columns you can create real columns that automatically balance, and the content flows nicely from one to another!

Here is an example

This heading spans all columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

This subheading doesn't span columns

Another spanning heading

Beginning of paragraph commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The block above has and balance the columns

But...how does it work?

It's relatively straightforward and easy to apply. Basically, we have 2 options to define the columns: we can either set the number of columns, which will automatically calculate heights and widths for us (using columns: 5). Alternatively we can set columns widths: eg. 100px to get 100px wide columns (using columns: 100px). To make the latter option work we have to set a height as well, or we would end up with just one 100px column. Column rules (the lines between the columns) and the column gap (the space between the columns) can be set with column-rule: 1px solid #000 and column-gap: 2em.

As you see in the example above you can also have elements that span all columns (and effectively split the columns) by setting column-span: all. Unfortunately there is no standard way to make an element span a specific number of columns (yet?).

To spruce things up we've added hypens: auto to get automatic hyphenation in the text, this makes the much dreaded text-align: justify look a lot better. The CSS column module also give you fine-tuning control on how elements flow from one column into another. In the example above, we've didn't want the h4 tag to be divided over two columns, and we didn't want there to be a column break right after. Breaking can be defined by setting break-before, break-inside and break-after. We set both break-inside: avoid-column and break-after: avoid-column in the example.

Useful?

Given that designers love columns (a common pattern we find is lists placed in multiple columns), we'd say yes. Before these CSS columns we had to hack our way around that by creating multiple lists, float them side-by side and so on. All in all, this clean-cut code replaces a bunch of unruly junk.

Great, but should I break out the champale quite yet?

Surprisingly, IE10 (it actually is a great browser!) and Opera have the best support for the CSS Multi-column Layout Module. Chrome, Safari and Firefox support most of the spec, but have trouble with column-span or break-*.

Gimme the source!

Feel free to look around the differente source files we used for this example.