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
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
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-after. We set both
break-inside: avoid-column and
break-after: avoid-column in the example.
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
Gimme the source!
Feel free to look around the differente source files we used for this example.