How Can I make a Dynamic Grid Layout Like Pinterest?

July 29, 2012

Pinterest may have changed how people go about webdesign that draw people via images. Before Pinterest, columns usually floated left or right and were subjected to starting where the last one left off, there wasn’t much desire for dynamic grid layouts. After Pinterest showed the world how cool a site could look with them, it became a desired feature for many websites soon after.  There is a pretty easy solution for it too:


Get the plugin at: http://masonry.desandro.com/

This plugin that will help you get that Pinterest styled look.  It’s also still useful if you are not sure on the height of the element items (from either just not knowing, or because the content inside the element varies dynamically).  It will calculate the absolute position needed per item for you, just call the masonry function after they load.

The basic structure of the elements is as follows:

<div id="container">
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>
</div>

The only extra code that activate the plugin is:

$('#container').masonry({
  itemSelector: '.box'
});

In any case, this was really useful and a pioneering plugin in modern web development.
Happy Coding ^_^

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive