Creating a CSS Only Pinterest-Style Masonry Layout

  • follow us in feedly
Published October 7, 2013 by Brad Knutson
Creating a CSS Only Pinterest-Style Masonry Layout

When Pinterest came out, a lot of people were intrigued by their masonry layout. It’s since been coined the “pinterest-style layout” for a lot of folks. Many people have tried to replicate the layout, and some do it better than others.

Currently, the best way to accomplish this layout is with Javascript. Using formulas and a little bit of math, you absolutely position each item to form the masonry layout.

Still, many people want to know if there was a CSS only solution.

At first, many people try floats.

.pin-article {
    float: left;
    width: /* some width */
    margin: /* some margin to separate */
}

This method creates a mosaic of blocks, but the problem is they aren’t lined up properly like you would want in a masonry style layout.

So, we look to CSS3 for a solution, which is where we find column-count, column-gap, and column-fill.

.container {
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    column-fill: auto;
}
.pin-article {
    width: auto;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
}
.ie10 .pin-article { // IE 10 Fix
    width: /* some width */
}
@-moz-document url-prefix() { // Firefix fix
    .pin-article {
        width: /* some width */
    }
}

Here is a great example: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout. This method has a few bugs in Firefox and IE 10, which I’ve fixed in my CSS above.

The solution isn’t perfect, as there are a lot of cross-browser issues. Javascript is still, unfortunately, the way to go at this point, but it’s cool to see CSS moving in a direction that would eliminate the need for Javascript when it comes to styles and layouts.

Do you have a better solution? Let me know in the comments below.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

12 thoughts on “Creating a CSS Only Pinterest-Style Masonry Layout

    1. Anurag Jain

      This example is indeed not working on Firefox as the column-count css (moz for FF) is probably not putting the layout in that format. We can see the various blocks coming one below the other. Tried on chrome which is working fine. Still to try for IE. Anyways this is an amazing tutorial. Loved it.
      Would be great to see a fix for FF, which i myself am trying as well.

    1. Brad Knutson Post author

      Because this is a CSS only solution, older browsers likely will have issues. IE9 and older are notorious for having poor support for a lot of CSS3 properties.

      If you require IE8 support, you will need to find a Javascript solution.

    1. Brad Knutson Post author

      Andre, I noticed that too, and unfortunately this is one of those “cross-browser issues” I mentioned in my post that will need to be ironed out in the future. For now, Javascript is still the best solution for a masonry-style layout!

  1. huret thomas

    Fix for FF :
    just comment: -webkit-column-fill: auto;

    code class=”” title=”” data-url=””>
    .container {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /*-moz-column-fill: auto;*/
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
    }

    Reply
  2. Marc

    The problem with column-layout is that it lays out items top-to-bottom, in stead of left-to-right, which is what you would often want. Assuming top to bottom is in line with the recency of the item, then you will see the most recent item on the top left, and next to it, a much older item.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">