Codepal

We develop enthralling web experiences.

masonry-css3-jquery-fallback

CSS3 Based Masonry Layout With jQuery Masonry as Fallback

Masonry layouts are a rage nowadays. Ever since Pinterest became a big hit, many sites have started using this layout to build some really creative websites. Here is a quick tutorial on how to build one using pure CSS3 and having the jQuery version as fallback.

Live Demo Downloadhttp://www.code-pal.com/wp-content/plugins/download-monitor/download.php?id=10

It would be awesome if you could like us on Facebook or subscribe to our feed...

While developing the UI of Pictrendz, I did a lot of research on Masonry layouts and found some really interesting jQuery plugins to implement it. The most popular ones being Masonry and Isotope. There are tons of tutorials out on the web which actually walk you step by step on how to set up Masonry. There is also a CSS3 only solution available too, which uses CSS3′s multi-column property to create the grid layout. From all my research, I came up with some really interesting points:

  1. jQuery Masonry plugin is really good but has an issue with images, specially if you don’t know the height and width of the image before hand. You need to set the height and width of the images to prevent overlapping of content blocks.
  2. CSS3 masonry layouts are really fast and less heavy on the browser. But the biggest drop back being multi browser support. Also, all the content loads vertically in the columns. So if you have a lot of images in the grid, when the image loads without any particular height set, everything will get pushed vertically downwards and then move on to the next column.
  3. Also, if you just have divs in the CSS3 version of the masonry layout, the divs sometimes get cut and move to the next column.

Update (12/1/2013)

You can prevent divs from getting cut while using CSS3 by applying

to the divs instead of

Thanks to Michael Foley for this tip. :)

Hence, am writing this quick tutorial to take advantage of both the methods of creating a masonry layout as well as keeping the experience uniform through out all the browsers.

I am going to  use CSS3 as the primary mean’s of creating the masonry layout and having jQuery Masonry plugin as a fallback when the CSS3 multi column feature is not supported in the browser. Let’s get started :)

Step 1: Set up jQuery and the HTML template

Add jQuery to your HTML page’s head section. I would recommend using Google’s CDN to add the jQuery library.

Wrap the collection of items you want to arrange in the masonry layout in a div. Make sure to add a class to each item to customise them further and also use in the masonry plugin.

If you will notice, we have provided proper width and height to each image element to prevent overlapping during jQuery Masonry and vertical content pushing while implementing the CSS3 version.

Step 2: Using CSS3 to implement masonry layout

First let’s style our masonry brick elements. Nothing much to do here other than providing bottom margin to have some vertical spacing between each brick element.

Now implementing multi columns using CSS3 is really easy. We just need to use the CSS3′s multi column attribute and provide the number of columns and the column padding.

Step 3: Adding CSS3 Animations

Adding some animation to the box elements gives a smooth, modern feel to the whole user experience. We will add some CSS3 transitions to the box elements.

CSS3 based masonry layout has successfully been setup!

Step 4: Implementing Masonry layout using jQuery Masonry plugin

For implementing the jQuery method of Masonry, all we need to do is, import the masonry plugin and initialise it. Always try to add the javascripts at the bottom of the page. This improves the overall loading time of the page. While initialising the masonry plugin, we are just going to provide the box name, column width and the gutter between columns.

Step 5: Adding jQuery Masonry plugin using Modernizr

In step 3, we completed the CSS3 version of the masonry layout but as a responsible web developers, we can’t stop the project right there. The CSS3 version is super fast, performance wise. But it is not a cross browser solution. Hence, in the previous step, we got the jQuery Masonry plugin to set up the masonry layout for us. Now let us look at how we can perform step 4 only when the browser does not support CSS3 multi columns. This is where Modernizr comes in. This is a tool which helps you detect what all CSS3 features are supported in a browser. Based on that, you can perform various functions or have a javascript fallback for a particular CSS3 feature. In our case, the masonry layout. So let’s add the modernizr script in the head section of our page. Why in the head section? Modernizr should be imported in the head section so that it can detect the css3 features as fast as possible.

Now at the bottom of the page, where we included the jQuery script, we need to add the modernizr script to check if the browser supports multi-columns. If it does, then we do nothing, but if it does not support the feature, then we load our masonry plugin and also the script to implement it.

In what way do you implement a masonry layout? Do you use the masonry plugins, if yes, then which one? Or do you know any other better way of implementing a masonry layout? Let us know :)


Discussion 5 Responses

Regarding your Update 1, the better way to prevent the tiles from getting chopped is:

.box {
-webkit-column-break-inside: avoid;
break-inside: avoid;
}

then you can keep your display: block;

Instead of using Masonry as a fallback, you can use this JavaScript polyfill to add CSS3 column support to IE8+

Then your CSS3 transitions are a progressive enhancement for browsers that support them.

Hey James, I was going through the documentation of the link you shared but what struck me weird was why would one need something like ‘The script uses some crossdomain ajax calls to work its magic’ ? For aligning the grid on your own website, why would one want to make any AJAX call at all?

The problem with this solution is that the boxes are arranged top to bottom whereas masonry is order left to right.

Leave a Reply

Your email address will not be published. Required fields are marked *

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