jQuery

50 jQuery Grid Plugins You Shouldn’t Miss

Pinterest-like responsive grid layouts became one of the standard ways to present “lots of content” in an organized way and it probably tells itself better than “dynamic grid layouts“. Such layouts are really functional to display elements with different dimensions nicely and don’t lose their popularity.

If you are willing to use such layouts on any web project then jQuery Grid Plugin can serve your purpose which is one of the easiest yet feature-rich solutions out there. In this article we have amassed a list of 50 jQuery Grid Plugins which will allow you to create beautiful layouts for almost any type of website quickly and less pain. Following plugins are responsive, have multiple styles and can be customized in means of look/feel.

So, let’s explore the list of some of the best jQuery Grid Plugins.

1. jColumn

jcolumn
jColumn is a lightweight JavaScript library to make selected html elements the same height. It can be used as standalone JavaScript library or jQuery plugin.

2. Stackgrid.adem.js

stackgridadem
stackgrid.adem.js is a very fast and simple javascript plugin to help you create a dynamic cascading grid.

3. jQDrawBootstrapGrid

Jqdrawbootstrapgrid by plozi
jQDrawBootstrapGrid is a simple jQuery plugin that draws grid columns to a Bootstrap enabled layout.

4. jQuery Grid Plugin

jQuery Grid
jQuery Grid is a plugin for the jQuery Javascript library. It is a very fast and extandable tool, and will add advanced interaction controls to any HTML table. This plugin support pagination, javascript and server side data sources, jQuery UI and Bootstrap. Free open source tool distributed under MIT License.

5. jMosaic

jMosaic
jMosaic is a lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.

6. Free Wall

Freewall
Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.

7. IMGrid

imgrid
IMGRID is a jQuery plugin to select images from grid layouts. It’s responsive and has nice layout powered with css.

8. jsGrid

js grid
jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging and sorting.

9. Justified.Js

justifiedjs
Justified.js is a jQuery plugin that creates a justified image grid of supplied images. Fill all the spaces! This ineffect creates a elegant image gallery with various sizes of images, where all the images of a row to have the same height.

10. Gridstack.js

gridstackjs
Gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts. It also works great with knockout.js.

11. Brick By Brick JS

brick by brick js
Brick By BrickJS is a lightweight jQuery masonry alternative including methods for appending content, prepeneding content, hiding content, showing content, removing content and more…

12. Gridify

gridify
Gridify is a lightweight jQuery plugin for creating a Pinterest-like grid with image loaded plugin.

13. jQuery Bootgrid

jquery-bootgrid
jQuery Bootgrid Plugin is nice, sleek and intuitive. A grid control especially designed for bootstrap. Simply include jQuery, jQuery Bootgrid and Bootstrap libraries in your HTML code. Specify your data URL used to fill your data table and set ajax option to true directly on your table via data API.

14. Dylay

dylay
DyLay is a jQuery plugin which allows to create dynamic layout very easily. Dylay is responsive and is tested in Safari, Firefox 1.5+ , Internet Explorer 6+, Opera 9+ and Chrome.

15. Gridmanager.js

gridmanagerjs
Gridmanager.js is a way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor. .

16. Elastic Column

elastic columns
Elastic Columns is a lightweight jQuery plugin that will suit your needs if you want to build a grid of items using columns with equal widths.

17. GridList

grid list
GridList is a drag and drop library for two-dimensional, resizable and responsive lists.

18. rowGrid.js

rowgridjs
RowGrid.js is a small, lightweight jQuery plugin for placing items in straight rows. It’s responsive and can be use infinite scrolling.

19. jqGrid

jqGrid
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.

20. Gridly

jQuery-Gridly
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids.

21 Shuffle

Shufflejs
Shuffle is a jQuery plugin to categorize, sort, and filter a responsive grid of items.

22. Griddy

griddy
Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space

23. jQuery Nested

jQuery-Nested
Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements.

24. Grid-A-Licious

Grid-A-Licious
Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution.

25. Gridster

gridsterjs
Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered.

26. Flex

flex
Flex is a fluid asymmetrical animated grid plugin for jQuery. Flex is an idea inspired by the old flash homepage onAdidas.com.

27. MatchHeight.js

match-height
MatchHeight.js makes the height of all selected elements exactly equal. It’s a more robust equal heights plugin that correctly handles mixed padding, margin, border, box-sizing, rows, groups. It handles images and responsive layouts by automatically updating when needed.

28. jQuery Waterfall

jquery-waterfall
jQuery.waterfall is jQuery plugin for Pinterest like waterfall layout. It’s lightweight version of fluid columns masonry layout of isotope. It’s fast, tiny, reliable and free alternative to isotope masonry column shift layout.

29. Freetile

freetilejs
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout.

30. jQuery Shapeshift

jQueryShapeshift
There are various jQuery plugins for creating Pinterest-like dynamic grid layouts. jQuery.Shapeshift is a strong alternative to them with an an extra touch :the items can be drag ‘n’ dropped (uses jQuery UI). The drag ‘n’ drop doesn’t affect the grid negatively as the grid auto-fills the gaps when needed.

31. Masonry

Masonry
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

32. Jui_datagrid

juidatagrid
jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format. It has built-in pagination, sorting, editing, deleting and advanced searching.

33. Ingrid

Ingrid
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors as column resizing, paging, sorting, row and column styling, and more to your tables.

34. jQuery Grid’Em Plugin

jQuery-Grid-Em-Plugin
Grid ‘Em is a simple jQuery plugin that allows you to evenly apply horizontal spacing on a list of items across multiple rows on a page.

35. CollegePlus

collegeplus
CollagePlus is jQuery plugin that arrange your images to fitexactly within a container. You can define the padding between images, give the images css borders and define a target row height.

36. jPhotoGrid

jphotogrid
jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items.

37. Photoset Grid

jQuery-Photoset-Grid
Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature

38. Mason.js

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.

39. S Gallery

s-gallery
S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely.

40. jResponsive

Jresponsive
JResponsive is a simple jQuery plugin that allows you to add a dynamically-resized layout to any page or element, customize the layout the way you want with or without top,right,left or bottom navigations.

41. Pinbox

Pinbox
Pinbox is a jQuery plugin to build Boxes like Pinterest. It automatically handles the different height of the boxes and layouts them appropriately.

If you still not satisfied with above plugins we have got some of the best premium jQuery Grid Plugins for you.

Premium jQuery Grid Plugins

42. Cube Portfolio

cube portfolio
Cube Portfolio is a jQuery grid plugin that provides powerful portfolio system, beautiful animated filtering, custom captions and it’s perfect for portfolio projects, horizontal slider, images gallery, team members, blog posts or any other ordered grid content.

43. Metro

metro jquery grid portfolio
Metro – jQuery Grid Portfolio, a very clean and simple jQuery Plugin that shows your portfolio in an interactive way. Some of the plugin’s strong points are: fully responsive grid, easy to set up, high performance, modern look & feel, clean and spacious design.

44. jQuery Grid Style Slider

jquery grid slider
This is a jQuery grid slider with support for multiple categories, expandable html content, and lightbox. The slider is fully configurable and resizable through the plugin’s parameters and stylesheet.

45. ModularUX jQuery Responsive Grid Plugin

ModularUX
ModularUX jquery plugin is an easy and customizable content grid maker, built in well-designed javascript and html5 / css3. Use a json file with your sitemap and ModularUX will do the hard work. Modularux divides in an easy way your web in pieces to an innovate interface with css3 animations. Is easy to use, and you can make it work for any of your webs (html, php, etc.).

46. magicWall

magic wall
MagicWall is a jQuery plugin for creating an image grid that cycles through a set of images using attractive animations at a specific time interval. You can use this plugin to create a decorative element of your website, display your work or simply use it as a nice animated background.

47. jQuery Dynamic Gird

dynamic grid
With Dynamic Grid: XML Gallery you can create the image gallery that you want. The script gives you huge control over the layout and animations, and the possibilities are endless.

48. jQuery Peepshow

jquery peepshow
jQuery Peepshow is a thumbnail gallery plugin. It aligns, centers, and crops images of any size into a grid of thumbnail previews. Thumbnails expand to their full dimensions on hover or tap. When images are placed in a group and hovered over, each one is expanded, rotated, and displayed via a smooth fade transition.

49. Final Tiles Grid Gallery

final tiles grid gallery
Final Tiles Grid Gallery is the definitive plugin to make a jQuery image grid gallery, an alternative to the boring Masonry or Isotope layout.

50. Ultimate Grid Gallery

ultimate grid
This is a HTML | CSS | JQuery Grid with a Lightbox, you can specify thumbnails for the grid and when you click on it to open the lightbox it will load the normal image, you can specify the text for the captions and for the lightbox.

50 jQuery Grid Plugins You Shouldn’t Miss
5 (100%) 2 votes
Please follow and like us:

2 Comments

  1. Awesome list, really helpful for creating dynamic layouts, I am gonna use few of these for sure.

  2. Nik

    Try also this one grid library
    http://fancygrid.com

Leave a Reply