CSS-Only Pinterest Style Columns Layout

Kushagra Agarwal

• 82633
• 124
• 17

If you have seen pinterest, they has a multi-column interface to display the pins and those pins arrange nicely even if they are not of the same height. They do it by using javascript to calculate the height of each pin and then positioning them absolutely. Achieving the same with CSS can be done in two ways:

• Using Floats: Floats can be used but only if all the pins have same height otherwise there will be gaps left all over.
• Using CSS3 Columns: This is what I used here. It is explained in detail below.

Javascript is still the way to go as this technique has some problems like, lesser cross browser support, seemed to produce weird bugs while testing that were fixed with weird solutions (although simple), hard to maintain the ordering of the items . If there is any ordering, like you want to show recent items where the first item is most recent, and the second most recent item is on the right, it doesn't maintains that. Also, the ordering changes on resizing so it's not a better option.

This technique is originally created by pixleight and I modified it a little to make it look and function much better. Here's a quote from the original creation on how it's done.

<div id="columns">
    <div class="pin">
        <img src="http://placekitten.com/400/300" alt="PlaceKitten" />
        <p>Jean shorts street art flexitarian ... </p>
    </div>
    <div class="pin">
        <img src="http://placekitten.com/g/400/300" alt="PlaceKitten" />
        <p>Leggings pour-over banksy, DIY wolf tattooed ... </p>
    </div>
    <div class="pin">
        <img src="http://placekitten.com/500/450" alt="PlaceKitten" />
        <p>Put a bird on it viral wolf, 3 wolf moon ... </p>
    </div>
    <!-- and so on ...  -->
</div>
    

Now on to the styling:

#columns {
    -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: 15px;
    column-fill: auto;
}

.pin { -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; margin: 0 2px 15px; padding: 15px; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); background: #FEFEFE; background-image: linear-gradient(45deg, #FFF, #F9F9F9); }

As you can see, I used column-count, column-gap on #columns to achieve the column behavior. Then I added column-break-inside: avoid; to the "pins" to prevent them from flowing from one column to the next — force them to be contained in a single column. Make sure to include -moz- and -webkit- browser prefixes. Then I just styled the boxes however I wanted.

For good measure, I added some media queries to adjust the number of columns depending on browser width:

@media all and (min-width: 960px) {
    #columns {
        column-count: 4;
    }
}

@media all and (min-width: 1170px) { #columns { column-count: 5; } }

This won't work in Internet Explorer 9 and below as it don't support multi column. However, you can use it if you don't care about it ;)
Make sure to take a look at the source code to understand more about it's working.