Few weeks ago I have been taking part in my friends project The Daily Interactive whose intention was to create new kind of source of news for Polish readers on how social media influence the world. My job was to consult and prepare frontend for this project so Ive spent countless hours on viewing modern news magazines and papers in search of some unusual ways to present content in form of a grid..

At that time I was enchanted by amazing functionality and grid that was presented to users by Pinterest and it was the exact thing I needed. The next step was to develop that kind of fluid, gap-free grid. “Wait” I thought “Dont reinvent the wheel”. During my search Ive found a few amazing JavaScript solutions to my problem that I proudly present in this post. Check them out!

JQUERY MASONRY

Masonry is one of the most comprehensive and elastic in use grid layout plugin for jQuery. It has been written by David DeSandro who also supports a commercial version called Isotope. Masonry is highly configurable allowing  a programmer to define settings like gutter size, column width, “corner stamp” etc. Masonry also can use CSS3 transitions that makes animations look smooth and nice and in case browser does not support those it is very simple to configure it with Modernizr. Moreover, this, „fairly popular” library has also great documentation and there are good chances that for every issue that you might have there is already an answer on i.e. Stackoverflow.

Features:

  • highly configurable
  • makes use of CSS3 transitions in modern browsers
  • RTL (Right-to-Left) support
  • infinite scroll support
  • corner stamp

License

jQuery Masonry is available under MIT Open Source license

Homepage

http://masonry.desandro.com/

ISOTOPE

Isotope can be defined as Masonry on steroids. Beside the same amazing functionalities found in Masonry, Isotope adds multiple additional features for your convenience. Those include dynamic sorting and filtering multiple layout types and more. Isotope is free for personal and non-commercial use while for commercial project theres a license fee. But hey, you get a lot of goodies for it.

Features

  • multiple layout modes – intelligent, dynamic layouts that cannot be achieved with CSS
  • Filtering
  • Sorting
  • Interoperability – features can be utilized together for a cohesive experience
  • Progressive enhancements – CSS3 transitions, GPU acceleration, fall-back to JavaScript as needed.

License
free for personal/non-commercial projects. Commercial License

Homepage

Isotope Homepage

BLOCKSIT

Both previous plugins are filled with additional tools, helpers, and features but If you dont need those youll appreciate the simplicity of BocksIt. Its simple, it works and its GPL2.

Features

  • simple configuration
  • just works
License
Blocksit is available under GPL2 Open Source license.
Homepage
Blocksit Homepage

WOOKMARK

You may have encountered Wookmark while browsing but if not, its place where you can collect “the amazing things you come across everyday”. Their layout seems very similar to what Pinterest looks like (not sure which was first) but Wookmark at least for me looks a lot cleaner. So, they were asked how did those boxes on their page were positioned and in response they have created Woomark jQuery Plugin.

Features

  • simple configuration
  • just works

License
Wookmark is available under MIT Open Source license

Homepage

Wookmark jQuery Homepage

FREETILE

Freetile is a jQuery plugin that enables you to position your content in an optimal way arranging items in tight grid. What distinguishes Freetile from other similar solutions is that you dont have to specify column width for your items to be arranged.

Features

  • simple configuration to get started and lots of configuration options
  • no fixed-size columns

License

Freetile is available under BSD Open Source license

Homepage

Freetile Homepage

CONCLUSION

Every library mentioned here is a good piece of software and may be easily incorporated into your design so feel free to check them out. If you know any other similar libraries feel free to share them in comments.