CSS3 Multi-Column Layout & Column-Count

I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns.  Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature and they all seem to do it differently.  I’ve noticed that Mobile Safari, Safari and Firefox each render the exact same column-count CSS differently.

My HTML is simply a dynamic unordered list and my CSS looks like this:
Note: the Opera and universal code is future proofing & wishful thinking.

.tag_list ul {
-webkit-column-count: 4; -webkit-column-gap:20px; 
-moz-column-count:4; -moz-column-gap:20px; 
-o-column-count:4; -o-column-gap:20px; 
column-count:4; column-gap:20px; 

Admittedly, this property needs quite a bit more hashing out before I’d recommend implementing it on the home page of a client site.  That being said, I’m happy to continue to use this for my Tags list.  It’s lightweight, efficient and a constant reminder that the web is ever-evolving.

8 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Zoe Gillenwater

    Yes, I’ve found Safari’s implementation of multi-columns to be quite lacking. Do you have margin added to the list items? Because Safari royally screwed that up in my tests: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

  • Duc Ban

    @Zoe: Your article is good. I got a similar problem. I found out the reason of my problem is I did change the line-height. After I set it back to default, the problem has been resolved.

    @Trent: Did you try multi-columns with paragraph mixed with blockquote, inline-image?

  • Jack Osborne

    I recently experiments with the multi-col property to say its’s pretty patchy is an understatement.

  • Trent

    @Zoe Gillenwater: Excellent write-up. No margin in this case... just those lists in a column count of 4.
    @Duc Ban: I Haven’t taken things that far just yet.
    @Jack Osborne: This is great.

  • Zoe Gillenwater

    @Duc Ban: None of my demos have line-height set on them, I’m afraid, so they’re all using default line-height already. I’ll keep that in mind, however, if I run into problems with other pages later!

  • Fred Kelly

    Wow, I had no idea this property existed. I have written a jQuery plugin to produce the same effect for older browsers.

    Is this property intended as a replacement for using floats when creating layouts?

  • Pontus

    The snapshot of Opera released yesterday adds support for this.

  • Trent

    @Pontus: Great news! Thanks for the head’s up

Leave a Reply