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

Leave a Reply