Ajax Loader
×

CSS-Only Pinterest Style Columns Layout

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

34 Comments

× New

Sign In to comment

dheeraj:

I want the images to be of different height and the width to be same (something like pinterest website layout), could you plz help me with this

dheeraj:

I want the images to be of different sizes and the width to be same, could you plz help me with this

loayyoussef:

Worked perfectly fine with me.
Thank you so much

vis97c:

the code works but I created four columns and the left column shows the items with its contents intact, but the other three items show as blank, but if the internal code had opacity but do not, do not

pavankumar:

Not working in Firefox please give some update...need desperately...

WebGirl_Lisa:

Looks beautiful but doesn't work in FF or IE. For those who have made it work in IE what did you do?

Ren :

column-fill isn't still supported and makes the tiles fall down in FF. probably it should be removed for the sake of crossbrowserness =)

anishshah101:

The name is a misnomer. Pinterest loads content horizontally. The column property loads layout top to bottom which becomes a problem for loading content when you have an infinite scrolling option.

SimVchr:

Hi ! !
First a huge thanks for your work, it's been working great so far : )
I just have one problem displaying embed (iframe) video into pins. It works good in the left column and doesn't in the second/third/... ones ...
Do you guys have any clue ?

Thanks a lot : )

S

ajoshi31:

Local file for explorer is not working
How can i use it in explorer it's not working, while firefox and chroem are fixed

Hean Hong Leong:

To get it to work in Firefox, I removed "-moz-column-fill: auto;". Alterntively, setting -moz-column-fill to "balance" works too.

wp_shaun:

This is very cool! Of course, IE9 can't handle it...but what else is new?

WebKingdom:

I am new to CSSDeck i am wondering do you have to include the link css file like this could someone tell me?

arios342:

I love it! just one question, what kind of code would I need to change the columns into one column if it's on a mobile device?

abhirathore2006:

can u mail me your code for chrome because i see that it works well in chrome if i open here but when i copy and open in my html page it doesn't work properly

abhirathore2006:

i copied your whole code its not working properly in chrome .it works in mozila .
anyway i made it work for i.e. :)

urbien:

This layout works really well, thanks both to the author and to @pixleight. It saved my day when using it with the backbone.js + jquery mobile. Without it there was a constant hassle to rearrange the tiles after the transitions, which resulted in a flicker. Unfortunately this method has a major flaw:
it arranges tiles vertically, and with endless/infinate page jquery plugin the affect becomes so bad, that I doubt I can continue to use it. It is disconcerting for the user to see tiles from the top jump to the left column. Any suggestions on how to fix it?

Thanks a lot!
Gene

madmaxcorp:

Very cool, but in Chrome we have a lot of space under block.

seb2020:

Awesome ! Thank's a lot.
Is there any posssibilities to make it work on IE ?

Ricky:

Sorry I'would like to post code example.
I's a div who wrap some html5 article.

Ricky:

Wow exactly what i need, but I don't know why this dont work for me!
Those lines of CSS3 it's only what needed to make it work?
Maybe this dont work with html5? I'have

...

structure.

madyar:

these effect like some jQuery effect ! and these are awesome

madyar:

THIS ! IS ! AWESOME ! I LIKE IT ! :x

Kushagra Agarwal:

Thanks! But your techniques are unique and awesome.. Keep showing us your amazing creations!! :)

LukyVj:

Kush is back ! and, as wile, he is the best !

pixleight:

Glad to see my technique has been helpful. Of course, javascript is still the way to go for cross-browser support (jQuery Masonry is a good tool). I like the hover effect in your adaptation.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+