Sickdesigner

Gotta tell you folks: this one’s been bugging me for a week now. I’m sure everyone is familiar with David DeSandro‘s awesome jQuery plugin, Masonry. Well, what this is is two things. First, it’s an homage to David himself and the awesome work that he does. Second, it’s a kick ass, super simple CSS technique that mimics what Masonry does. With just CSS.

For those unfamiliar with jQuery Masonry, what it, essentially, does is mimic a vertical float, not just the regular horizontal kind. In fact, I used it for the homepage of my blog (where the different posts are displayed).

So, what’s the trouble with CSS? It’s quite simple: there is no CSS model that takes into account vertical alignment. Period. I swear I tried everything. From floats, to positions, displaying inline, run-in, you name it, I tried it. But there was this midget in my head telling me that there must be a solution. And, wouldn’t you know it, BAM, two days ago, while eating an omelet, of all things, it struck me.

The all mighty columns

The solution is so simple that it gave me a brain freeze: CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect. But let’s get down to the code. What do you need, you say?

A container and some children

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>


The CSS magic

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }


An interesting fact: the width of the elements within the columned container is not relative to the width of the parent, but the width of the column. In the case of the example above width: 100% actually translates to 150px, not 480px (the width of the parent).

Fallbacks and browser compatibility

Of course, our friends at Microsoft have taken good care to not provide support for CSS columns. Not even in IE9! In this case, I recommend slapping in David’s awesome plugin like so:

<!--[if lte IE 9]>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<![endif]-->

In Microsoft’s defense, for what it’s worth, this does work (well, even!) in the IE10 Platform Preview. Hopefully they’ll leave support for columns in the final version, which could be released as early as next year.

I’m guessing there’s no point in mentioning that this works (brilliantly) in Gecko and Webkit browsers (Mozilla, Chrome, Safari). Opera does weird things that I don’t quite understand yet, but does an acceptable job of rendering columns (it just has trouble with the gaps and all).

This is usually where you’d find a link to a demo page. This time, however, I direct you to the homepage of this site. Yes, I used it live. I have that much confidence in this. Enjoy, kids!