Pinterest Style Columns with CSS 8

This has always been one of my pet peeves with CSS and using Divs. I HATE having columns with different heights showing all weird floating every which way. Justin made a really cool looking div for the Harvest Party Winners List but when the different winners sections had different heights it looked terrible. I found this solution so I wanted to share it with the world:

Notice the second green div is a different height than the rest. Yet it’s still floating in there really nice? That’s the effect I’ve always thought floating should do but doesn’t do. So here you go.

Step 1: the container. This is the div that all those items are inside:

-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 3;
column-gap: 10px;
column-fill: auto;

Notice that you specify the columns there? Suweeet! That simple. Just remember to make sure the container div width can fit 3 of those columns.

Step 2: the items. In the example the blue and green divs:

-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
width: 300px;

This fun stuff ensures that you don’t have the items going to the next column. If it were all text then it’d probably look better without that, but since we have chunks of divs and tables it’d not really work well. Don’t forget to put the width in there.

Step 3: marvel at the creation that should have been! Yeah, I got really excited. So excited that I had to write this blog post because these are one of those tricks that I don’t want to forget and if I don’t put it somewhere on my blog I’ll forget where or how I found it to do it again ;-)