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
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
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.
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.