Pinterest like Grid layout using jQuery

akshitsethi —  October 31, 2013 — Leave a comment

grid-layoutIn this tutorial, learn to create Pinterest like grid layout using jQuery. The grid layout not only looks great but is also highly responsive in nature as it adapts itself as per the screen size it is viewed on. Let’s see how we are going to do this.

Here are the important links. Demo or Download

 

I am using an awesome jQuery plugin Freewall for this tutorial. I strongly suggest that you view the demo first so that you can have a fair idea as to what you are going to learn. The demo is best viewed on any screen size. :)

To start with, have a look at the html and css code below to understand how the layout looks without the touch of jquery.


 

Now, since the magic has been applied, our layout will look and function exactly like we want it to. So, by following the steps in this tutorial, you can create an Pinterest style dynamic grid layout for your web application. And it’s easy to do so. Right?

akshitsethi

Posts

I am a designer+developer by profession and entrepreneur by passion. I work on LAMP platform and can design+develop small static websites to high performing enterprise web applications. In love with the web and addicted to Spanish.