Web Development

The Famous Pinterest Dynamic Grid Layout and Design Inspirations

Written by Kevin Liew on 03 Apr 2012
155,601 Views • Shares
17 comments

Introduction

Dynamic Grid is one of the hottest page layout we can easily seen in web industry. As you can see, this phenomena is caused by the rising star - Pinterest which allow us to pin our favourite photo and share it in our pinboard. The whole sharing process is painless and pretty fast.

Dynamic grid kinda like float, but it rearranges and repositions all the child elements next to one another. When you resize the windows, child elements are being realigned to the right position. The first time I saw this kind of layout was through a jQuery plugin called jQuery Masonry, it was way before I discovered Pinterest.

In this post, we have gathered 3 plugins and a ruby based pinterest clone layout. If you want to create a similar layout, these plugins could help you to do it fairly quickly.

  • Masonry MasonryPossibly the very first plugin that does this kind of layout. jQuery Masonry has been available for quite a while. Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall. It comes with a handful of options, methods and most importantly a good documentation.
  • Isotope IsotopeIsotope in the other hand is a feature rich dynamic grid solution comes with filtering, sorting and different layout such as masonry, fitRows and straightDown. It's a pretty intensive javascript plugin came with wide varieties of configurable settings. However, if you want to use it commercially, you need to buy developer license.
  • Wookmark WookmarkJust emerged not long ago wookmark is a new jquery plugin for creating dynamic grid layout. And it does just that, it gives you only for settings for now - container, offset, itemWidth and autoResize. Comparing to previous two solutions, wookmark can be quite restrictive and not easy to make a custom dynamic grid.
  • Pinterest Clone Layout Pinterest Clone LayoutIf you're a Ruby developer and want to make a pinterest clone as fast as possible, there is a layout for it. This layout uses jQuery masonyn plugin and already styled and ready to be used.

Inspirations

Some amazing inspirations of dynamic grid. However some might look familiar to you because it's famed as Pinterest Clone. Otherwise, a lot of them are just simply creative use of dynamic grid to showcase their works and content.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

17 comments
David Woodfin 7 years ago
Hello
Thank you for your nice article.
Thanks
Reply
Dolora 7 years ago
Nice Article!!!Thanks for sharing....I love pinterest because in this we can add images and photos at the same time we can share with our friends. fabulous features in this apptha pinterest clone here
http://www.apptha.com/pinterest-clone-for-joomla
Reply
Imran Haider 7 years ago
Very Nice Article
Reply
Jonathan 7 years ago
Nice blog, but i think you missed one of the best pinterest clone http://www.cogzidel.com/pinterest-clone. Thanks
Reply
MarkJVillicana 7 years ago
Pinterest is a new hit and it’s a perfect time to launch your own. Fortunately there’s a pinterest clone script for this already: http://uniprogy.com/pinnect
Reply
Rudra Ganguly 7 years ago
We have developed pinterest clone for Men. Please see www.dartitup.com .
Reply
Eric 7 years ago
I am happy with pinterest clone script http://uniprogy.com/pinnect. I find it the best one!
Reply
Rhea 6 years ago
The best Pinterest clone is here http://uniprogy.com/pinnect
Reply
ZelooJames 6 years ago
Nice list. I think http://www.pinterestclone.org is responsible for those of those pinterest clone sites popping out there. It holds true on the Internet that first come first serve. That you can never beat the original. Look at facebook, twitter and all the clones out there.
Reply
PinterestClone 6 years ago
Lots of copies of pinterest clones out there but they can never beat the original. I bet you they created these clone sites with the pinterest script from http://www.pinterestclone.org
Reply
Martin 6 years ago
We have developed pinterest clone for Adult Amateurs. Please see http://www.pinamateurs.com .
Reply
Bravo 6 years ago
Yeah! As Bravo said you missed PINDERFULLLLL.. Its Doing Good.
Reply
Jim 6 years ago
Liked this article..Best pinterest clone available in the market is http://www.gripsell.com/pinterest-clone/
Reply