The Famous Pinterest Dynamic Grid Layout and Design Inspirations

The Famous Pinterest Dynamic Grid Layout and Design Inspirations


The Famous Pinterest Dynamic Grid Layout and Design Inspirations

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

16 comments

David Woodfin
Wed, 4th April 2012
Hello
Thank you for your nice article.
Thanks
Reply
Dolora
Thu, 5th April 2012
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
Mon, 9th April 2012
Very Nice Article Reply
Jonathan
Mon, 9th April 2012
Nice blog, but i think you missed one of the best pinterest clone http://www.cogzidel.com/pinterest-clone. Thanks Reply
MarkJVillicana
Tue, 17th April 2012
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
Tue, 1st May 2012
We have developed pinterest clone for Men. Please see www.dartitup.com . Reply
Eric
Wed, 2nd May 2012
I am happy with pinterest clone script http://uniprogy.com/pinnect. I find it the best one! Reply
Rhea
Wed, 23rd May 2012
The best Pinterest clone is here http://uniprogy.com/pinnect Reply
ZelooJames
Tue, 12th June 2012
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
Tue, 12th June 2012
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
Thu, 5th July 2012
We have developed pinterest clone for Adult Amateurs. Please see http://www.pinamateurs.com . Reply
Bravo
Tue, 31st July 2012
Yeah! As Bravo said you missed PINDERFULLLLL.. Its Doing Good. Reply
Jim
Wed, 1st August 2012
Liked this article..Best pinterest clone available in the market is http://www.gripsell.com/pinterest-clone/
Reply
CloneIDEA
Thu, 4th April 2013
This article is very helpful, there are also open sourced clone scripts for pinterest: http://www.cloneidea.com/pinterest/all/all Reply
Kenneth Bushman
Wed, 23rd October 2013
The blog was really interesting. May be you can have a look at it http://pinterestclone.technoduce.com/ Reply
Irfan Fauzi
Sat, 16th November 2013
Hi great post.. I'd just recently found another plugin alike.. Maybe you all guys can do some research if this is better or not.. http://vnjs.net/www/project/freewall/ Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement