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 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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.