Best jQuery Grid Plugins & Tutorials with Demo

    jQuery Masonry : Cascading grid layout library

    Masonry is a 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 then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

    jPhotoGrid – Zoomable jQuery Image Gallery

    jPhotoGrid - Zoomable jQuery Image Gallery

    Nearly all of the styling for this plugin is done in css.  The trick is to layout the grid by floating the list items.  The first thing the plugin will then do, is convert these all to absolutely positioned.

    jQuery Panel Magic – Panel Layout For Small Websites

    jQuery Panel Magic – Panel Layout For Small Websites

    jQuery Panel Magic plugin is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. The plugin provides you with a unique way to “panelize” a website.

    An Awesome jQuery Plugin For Creating Magical Layouts – Isotope

    jQuery Plugin For Creating Magical Layouts – Isotope

    Isotope is an impressive jQuery plugin that enables us to sort items and create smart layouts.Using the plugin, any given list of items can be filtered with show/hide effects and they can be re-ordered with slick animations.The plugin’s layout features are very powerful as well. With a simple function, items can be converted into horizontal/vertical layouts or arranged intelligently within a grid and much more. And, all with nice animations.

    B&W Box jQuery Gallery with Demo

    We created a little jQuery gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album.