Animated Responsive Grids using Masonry

Responsive Web Design – Who hasn’t heard of this? Well, if you are a web designer/front-end architect, you probably have incorporated this concept in your projects already. Today, we will take this popular web trend one step further to talk about Animated Responsive Grids. Animated Responsive Grids are cascading grids that animate when you resize your screen size. Put it simply, it’s responsive web design but with a flavor, “animation”. Animation forms a crucial part of our everyday like, adding dynamicity to the user interface and making everything seem more appealing.


In this article, we will introduce Masonry, a Cascading Grid JavaScript library. Masonry is described as, “a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.” Here’s an image, and it obviously doesn’t do justice because it’s animated. So try visiting this page ( and resize the browser to see it in full effect. Pretty cool? Definitely.


masonry 2



Getting Started


To use Masonry, you need to put its core script inside the header section of any page you would like to use it on. The script you’ve to embed is given below.

<script src=”/path/to/masonry.pkgd.min.js”></script>


Once you’ve added the script, you can start creating some cool animated responsive grids with Masonry. Here’s a short guide.




Below is a sample HTML code that allows you to add div elements that represent the boxes inside a Masonry Cascading grid. Once you setup the correct HTML markup for your design, you can now style the elements via CSS.


<div id=”container”>





You can style the HTML elements with as much CSS you like. Here’s a sample.


.item { width: 25%; } .item.w2 { width: 50%; }


Now, once the design part is done, you must initialize the Masonry using either JavaScript of HTML. The recommended technique is to use HTML since its much easier and less heavy on the code. Here’s how you can achieve that.


To initialize a container with Masonry magic, use the above code to do so:


<div id=”container” class=”js-masonry” data-masonry-options='{ “columnWidth”: 200, “itemSelector”: “.item” }’>


Note that it is a requirement to use the exact format for initliazing Masonry using HTML. Note the quotes for attribute values and the JSON.


That’s it. Now, to make something cooler like this ,you would need to do a lot more coding, but you get the idea.