15 jQuery Plugins For Creating Grid Layout

Here are 15 jQuery plugins that will help you manage your grid layout better. Most of these plugins are to help you enhance design, but they can also be used during developing a project.

Flow Gallery

jQuery plugin based HTML5 multimedia gallery enabling you to showcase your photos/audio/video in a modern and sleek interface. You have the option of presenting your items in in either columns or rows type grid.

flow gallery

imGrid

This is a JQuery plugin that allows you to create an high quality justified gallery of images.

imggrid

MasonJS

Mason is a jQuery plugin that helps you create a perfect grid with no gaps and no ragged edges. It Works by mapping elements in a grid, finding where gaps are and filling them in as a stone mason would do.

masonjs

Cube Portfolio – Responsive jQuery Grid Plugin

Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content.

cube

Shuffle.js

Categorize, sort, and filter a responsive grid of items.

shuffle

jQuery.Shapeshift

Shapeshift is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins.

shapeshift-1

Megafolio

Megafolio Pro is a fully responsive media grid plugin that allows you to display content in almost every way possible using preset or randomly generated layouts.

megafolio-2

Grid—A—Licious

Grid-A-Licious is a dynamic layout plugin for jQuery. It is similar to jQuery Masonry, Freetile and the Wookmark plugins. It lays out a series of elements in a dynamic column grid.

grid-a-licious-3

gridster.js

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

gridster-4

Wookmark

This is a jQuery plugin for laying out a dynamic grid of elements.

wookmark-5

Isotope

Isotope is an exquisite jQuery plugin for magical layouts. You can reveal & hide items with filtering and re–order items with sorting.

isotope-6

jQuery Masonry

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.

masonry-7

The Engine

Dynamic Grid is a jQuery plugin for generating an animated, responsive and great looking grid for your content – be it images, news feed, text and what not.

engine-8

BlocksIt.js

BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you.

blockit-9

Flex

A fluid asymmetrical animated grid plugin for jQuery.

flex-10

Youmax

Youmax is a jQuery plugin used to display Channels, Videos and Playlists from YouTube & Vimeo on your website.

youmax

2 Comments

  1. fordrive.netsays:

    One more new library for creating/sorting/filering/dragging grids – http://gridifier.io

  2. Albertsays:

    I found this https://goo.gl/tXIACC which uses the latest version of Isotope and implement all complicated filtering, searching and sorting features and it is very easy to implement.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.