20 Most Useful JQuery Grids

jQuery grids are a very useful layout option when its potential is grasped. In this list, you will see responsive, drag and drop, animated filtering, and other types of grids.

grid forms are dense forms designed for use in applications that require lots of data to be entered regulary.

A tiny Javascript/CSS framework that helps you make forms on grids with easy.

1. Grid Forms: Complex CSS Form Builder

A form set designed for mobile or desktop applications that require tons of data entry added regularly. It has been created with CSS but it uses a bit of JavaScript for functionality. It does some cool things, like automating fields (for instance, it relates fields by proximity if you indicate it; you can set a specific size for the form so it fits the space you assign to it, and every line wraps when viewed from mob…


2. brick-by-brickJS: Masonry Style Layouts jQuery Plugin

A jQuery plugin that creates masonry style layouts in a simple way. You don’t need complicated markup for making grid websites or themes, and your work gets simplified by the use of methods like addAfter, addBefore, removeItems, hideItems, showItems, end and reload. It is licensed under MIT.


3. Mason: Flexible Grids jQuery Plugin

Mason is a jQuery plugin that allows you create a beautiful grid without gaps and ragged edges. It is meant to create perfect, stable and flexible grids, and it works by measuring the dimensions of each block and the total area, filling the gaps when found. It was created by Drew Dahlman.


4. Gridstack.js: Responsive Grid jQuery Plugin

Gridstack is a jQuery plugin that will allow you to create Bootstrap V3 compatible grids, perfect for arranging widgets in multiple columns. It is meant to be used in a drag-and-drop manner. Can be well complemented with knockout.js


5. jQuery Pinterest Grid Creator

Gridify is a simple script that helps you create Pinterest-style grids for use in a website or mobile app. It works with jQuery, JavaScript or YUI. This script supports: – Image load – Window resizing – Items with a really long height – Dynamic item width – CSS3 Transitions The usage is fairly simple and quick so you can enjoy the tool right away. This script was created by Ng…


6. Backgrid.js: Stylable Data Grid Widgets

Backgrid is made up of multiple components designed for building data grid widgets that can be customized easily. The tool intends to provide all the basic options with core Backbone UI elements and a refined API that makes extensibility simple. This results in greater possibilities for more complex projects.


7. Shapeshift: jQuery Column Grid System

Shapeshift allows the user to arrange a set of elements into a grid system comparable to the one found in Pinterest. Once you move an element through the drag and drop interface, it reorganizes the elements in a logical position every time an item is moved. Shapeshift is responsive and works on touch, with the help of the included jQuery UI Touch Punch.


8. Gridster: Drag-and-Drop Grids

With Gridster, you can create dynamic grids that can be rearranged freely by simply moving the elements around, thanks to a drag and drop interface. This jQuery plugin also comes with many customization options, allowing you to easily resize, serialize, add widgets and much more.


9. jQuery & CSS Windows 8 Animated Grid

Sara Soueidan has recreated these icon animations seen on Windows 8′s dashboard by taking advantage of the CSS3 3D transform property. These animations make tiles slide in various directions, do flips, turns, color variations, half sliding and more. It uses beautiful flat icons and follows the famous Metro style from Microsoft.


10. Grid ‘Em: jQuery Plugin

This simple jQuery plugin is used to evenly add horizontal spacing between items in a website, providing a responsive behavior to them. In the end, the tool intends to improve organization in the website and therefore, the user experience.


11. jQuery Photoset Grid for Images

This simple jQuery plugin makes it possible to arrange images into a flexible, responsive grid, inspired by Tumblr’s photoset feature. Aside from the normal usage, you can set different options; for instance, adding a lightbox for high-resolution pictures.


12. Grid-A-Licious: jQuery Plugin for Grids

Grid-A-Licious is a simple jQuery plugin designed to create responsive grids. The items on the grid float around instead of being locked to a specific position, which makes for a faster, better viewing experience. Used to be a WordPress theme, but the developer has dropped support for it, bringing it back to just a plugin.


13. Wookmark: Image Organization jQuery Plugin

The Wookmark jQuery plugin allows the organization of images in a neat, responsive grid. The plugin automatically recognizes the size of the window and adjusts the images to fit on the screen. The tool will also try to arrange the elements in such a way that columns always tend to be the same height whenever possible, creating a harmonic appearance.


14. jQuery Nested: Gapless Grid Layouts

Nested is a fantastic jQuery plugin that allows the creation of gap-free grid layouts, recognizing the space available and organizing the elements inside of it. The final touch is the possibility to resize the last element in order to have a completely gap-free design.


15. MixItUp: JQuery Filter and Sort Plugin

MixItUp is a jQuery plugin that offers animated filtering and categorization of information. It is particularly useful for content that needs sorting like pictures, portfolios, galleries or blogs, showing only relevant content for a genre or class you specify. It can also serve as a valuable tool for engaging application UI and data visualization.


16. Mosaic Flow: Pinterest-Like Responsive Grid

Mosaic Flow enables you to create a responsive grid, similar to the one found at Pinterest. It is quite simple, just putting the images together with no decorations or gaps. The greatest part of this grid is its speed, images rearrange themselves immediately when changing the window size, a strong point for performance-obsessed devs.


17. 960 Grid on jQuery Mobile

jQuery-Mobile-960 is a port of the 960 Grid, designed to make the jQuery-mobile layout more adaptable, ultimately improving the viewing experience on portable devices. It does this by combining the ease of jQuery Mobile and the flexibility of 960.gs. To use 960 grids in jQuery Mobile, you just need to add one simple line of code, and then you can use the standard 960 grid syntax inside jQuery mobile pages.


18. Masonry: JavaScript Grid Layout Library

Masonry is a pretty well-known JavaScript grid layout library. The idea behind it is to place elements (which could be pictures, links to other content or whatever you want) in their best possible position relative to each other. It provides a very pleasant, organized experience, providing the user with content boxes they can easily interact with.


19. Draggable Image Boxes Grid

In this tutorial, Codrops describes how to make a draggable grid with thumbnails and menu-like elements. Once a thumbnail is clicked, the content will show and take the whole screen. In order to make this a draggable grid, the jQuery.kinetic plugin by Dave Taylor is used. It all results in a sweet drag scrolling that looks and feels really good.


20. Freetile.js: Grid Plugin for jQuery

Freetile allows the organization of elements in a grid layout in a dynamic and responsive way. What makes it different from other plugins of its kind is its extensive customization settings, which let the user add preferences like left-right alignment, different proximity between elements in the same grid, automatic grid size and more.


21. Waterfall: jQuery Plugin for Image Grid

The Waterfall jQuery plugin provides a grid with thumbnails and a good number of customization options. Among its features, we can find infinite scrolling, custom width, fade-ins and much more. The only downside is the lack of a larger view.

Related Posts: