Top 50 Best Grid Layout jQuery Plugins Of 2017 (So Far)

by jQueryScript,

The Grid Layout is one of the most popular cross-platform layout design concepts in modern web design. In this blog post you will find the top 50 best responsive grid layout jQuery plugins for both desktop and mobile web design. I hope you like it.

Not a jQuery user? View Top 10 JavaScript & CSS Responsive Grid Layouts.

Top 50 Grid Layout jQuery Plugins:

Responsive Masonry-style Gallery Plugin With jQuery And Bootstrap - mp-mansory.js

mp-mansory.js is a lightweight jQuery plugin used for creating a responsive, fluid, Masonry- and Pinterest-style grid layout / gallery using Bootstrap's grid system.

https://www.jqueryscript.net/layout/Responsive-Masonry-style-Gallery-Plugin-With-jQuery-Bootstrap-mp-mansory-js.html

[Demo] [Download]

Facebook-like Photo Grid Plugin With jQuery - images-grid

images-grid is a jQuery plugin which allows to display first x (1-6) images of your gallery in a grid view as you seen on Facebook timeline.

https://www.jqueryscript.net/gallery/Facebook-like-Photo-Grid-Plugin-With-jQuery-images-grid.html

[Demo] [Download]

Responsive Dynamic Tile Grid Layout with jQuery - tileWall

tileWall is a lightweight & easy-to-use jQuery layout plugin for positioning differently sized tiles in a responsive, fully configurable, mosaic-style grid.

https://www.jqueryscript.net/layout/Responsive-Dynamic-Tile-Grid-Layout-with-jQuery-tileWall.html

[Demo] [Download]

Pinterest Style Responsive Web Layout Plugin For jQuery - newWaterfall.js

newWaterfall.js is a tiny fast jQuery plugin that creates a responsive, fluid, Pinterest-style waterfall grid layout to present your web content in an unique manner.

https://www.jqueryscript.net/layout/Pinterest-Style-Responsive-Web-Layout-Plugin-For-jQuery-newWaterfall-js.html

[Demo] [Download]

Google Style Expanding Thumbnail Grid Plugin With jQuery - Mg-Space

Mg-Space is a jQuery plugin to create a responsive photo gallery that allows to open an expanding thumbnail grid when clicking on an image like an accordion.

https://www.jqueryscript.net/gallery/Google-Style-Expanding-Thumbnail-Grid-Plugin-With-jQuery-Mg-Space.html

[Demo] [Download]

Responsive Mosaic Photo Gallery / Grid Plugin For jQuery - mosaic.js

mosaic.js is a responsive jQuery image galery / grid plugin that dynamically arranges a group of images into a mosaic style grid while preserving the original aspect ratios.

https://www.jqueryscript.net/gallery/Responsive-Mosaic-Photo-Gallery-Grid-Plugin-For-jQuery-mosaic-js.html

[Demo] [Download]

Minimalist Masonry-style Grid Layout Plugin - Masonry.js

Yet another jQuery plugin that makes it easier to create responsive, fluid/elastic grid layout like the famous Masonry or Pinterest layouts.

https://www.jqueryscript.net/layout/Minimalist-Masonry-style-Grid-Layout-Plugin-Masonry-js.html

[Demo] [Download]

jQuery Plugin For Responsive Justified Image Gallery - Justified

Justified is a small and simple-to-use jQuery plugin for generating a responsive justified gallery / grid to present your images with various sizes and aspect ratios.

https://www.jqueryscript.net/gallery/jQuery-Plugin-For-Responsive-Justified-Image-Gallery-Justified.html

[Demo] [Download]

Responsive Justified Image Grid/Gallery Plugin - jQuery imagesGrid

imagesGrid is a super tiny jQuery plugin that helps you create a fully responsive image gallery with justified grid layout.

https://www.jqueryscript.net/gallery/Responsive-Justified-Image-Grid-Plugin.html

[Demo] [Download]

Masonry-like Responsive Tiled Grid Layout Plugin With jQuery - Masonry.js

Masonry.js is an ultra-light (~1kb minified) jQuery plugin used to create responsive, cross-platform, tiled gallery/grid similar to the Masonry library.

https://www.jqueryscript.net/layout/Masonry-like-Responsive-Tiled-Grid-Layout-Plugin-With-jQuery-Masonry-js.html

[Demo] [Download]

Responsive Filterable And Draggable Grid System - Muuri

Muuri.js is a powerful jQuery plugin used to generate a responsive, dynamic, animated, sortable, filterable grid layout for your modern web projects.

https://www.jqueryscript.net/layout/Responsive-Filterable-Draggable-Grid-System-Muuri.html

[Demo] [Download]

Responsive Pinterest-style Layout Plugin For Bootstrap - Bootstrap-waterfall

Just another jQuery plugin to render a responsive, dynamic, fluid grid layout as you seen in Pinterest.com, based on Bootstrap's List group component.

https://www.jqueryscript.net/layout/Responsive-Pinterest-style-Layout-Plugin-Bootstrap-waterfall.html

[Demo] [Download]

Inline-block Based Fluid Grid Layout Plugin For jQuery - tightgrid.js

tightgrid.js is a very small jQuery layout plugin that generates a compact, fluid grid layout from inline-block and vertical-align: top elements while keeping original order.

https://www.jqueryscript.net/layout/inline-block-Based-Fluid-Grid-Layout-Plugin-For-jQuery-tightgrid-js.html

[Demo] [Download]

Lightweight Masonry-like Grid Plugin For jQuery - grid.js

Yet another ultra light weight (4.3kb) jQuery plugin for generating responsive Masonry-like layout that displays your cells in a grid in a surely nice way.

https://www.jqueryscript.net/layout/Lightweight-Masonry-like-Grid-Plugin-For-jQuery-grid-js.html

[Demo] [Download]

Minimal Metro Style Tiled Grid Plugin With jQuery - jqgrids

jqgrids is a super tiny (~2kb) jQuery plugin that helps you generate a Metro style (Microsoft's Modern UI) tiled grid layout with custom background images / icons.

https://www.jqueryscript.net/layout/Minimal-Metro-Style-Tiled-Grid-Plugin-With-jQuery-jqgrids.html

[Demo] [Download]

List View / Grid View Switcher Plugin For jQuery - simple-list-grid

simple-list-grid is a jQuery plugin for modern cross-platform web design that allows you to switch between list view and grid view with just one click.

https://www.jqueryscript.net/layout/List-View-Grid-View-Switcher-Plugin-jQuery-simple-list-grid.html

[Demo] [Download]

Responsive Cascading Grid Layout Plugin For jQuery - Bricklayer

Bricklayer is a lightweight jQuery layout plugin that lets you create a responsive, dynamic, fluid, cascading grid layout similar to the popular Masonry or Pinterest web layout.

https://www.jqueryscript.net/layout/Responsive-Cascading-Grid-Layout-Plugin-For-jQuery-Bricklayer.html

[Demo] [Download]

Minimal Responsive Grid Layout Plugin For jQuery - Elements Grid

Elements Grid is a simple, lightweight and responsive jQuery grid layout plugin that dynamically resizes and arranges a collection of html elements to fit within your viewport.

https://www.jqueryscript.net/layout/Minimal-Responsive-Grid-Layout-Plugin-For-jQuery-Elements-Grid.html

[Demo] [Download]

Google-style Expanding Content Preview Effect With jQuery - Folding Content

A jQuery plugin used for creating a nice folding menu that allows you to open an expending preview when clicking on a menu item as you seen on Google Images Search.

https://www.jqueryscript.net/menu/Google-style-Expanding-Content-Preview-Effect-With-jQuery-Folding-Content.html

[Demo] [Download]

Dynamic Cross-platform Grid Gallery Plugin With jQuery - Wall/Grid Gallery

A highly customizable jQuery plugin to create a dynamic, responsive, cross-platform wall/grid photo gallery which can be edited from a HTML, JSON or XML files.

https://www.jqueryscript.net/gallery/Dynamic-Cross-platform-Grid-Gallery-Plugin-jQuery-Wall-Grid-Gallery.html

[Demo] [Download]

Responsive Expanding Grid / Tab Layout Plugin For jQuery - Gridtab

Gridtab is a tiny jQuery plugin for creating responsive grid or tab layouts which allow the user to expand / hide web content by clicking on their corresponding grid/tab items.

https://www.jqueryscript.net/layout/Responsive-Expanding-Grid-Tab-Layout-Plugin-For-jQuery-Gridtab.html

[Demo] [Download]

Google Images Inspired Thumbnail Grid Plugin For jQuery - Expansion Grid

Expansion Grid is a jQuery plugin for generating an expanding thumbnail grid/gallery where the users are able to view more details when they click on a grid item.

https://www.jqueryscript.net/layout/Google-Images-Inspired-Thumbnail-Grid-Plugin-For-jQuery-Expansion-Grid.html

[Demo] [Download]

Responsive Equal Height Plugin with jQuery - ResponsibleHeight

ResponsibleHeight is a jQuery plugin that helps you create responsive, neat web layout with equal height grid items for your website.

https://www.jqueryscript.net/layout/Responsive-Equal-Height-Plugin-with-jQuery-ResponsibleHeight.html

[Demo] [Download]

Google Image Inspired Gallery View For jQuery - searchGalleryView

searchGalleryView is a jQuery plugin used to create a responsive justified image gallery with support for both grid and list views just like you seen on Google Image Search.

https://www.jqueryscript.net/gallery/Google-Image-Gallery-View-jQuery-searchGalleryView.html

[Demo] [Download]

Expanding Grid To Carousel Plugin With jQuery And Bootstrap - grid-to-carousel.js

grid-to-carousel.js is a jQuery & Bootstrap plugin which expands the Bootstrap grid into a full-sized carousel when the users click on a grid item.

https://www.jqueryscript.net/layout/Expanding-Grid-To-Carousel-Plugin-With-jQuery-And-Bootstrap-grid-to-carousel-js.html

[Demo] [Download]

Lightweight Responsive Layout Framework With jQuery - columns.js

columns.js is an extremely lightweight jQuery plugin used for creating simple, responsive layout controlled by CSS classes. Similar to the Bootstrap's grid system.

https://www.jqueryscript.net/layout/Lightweight-Responsive-Layout-Framework-With-jQuery-columns-js.html

[Demo] [Download]

Lightweight Customizable jQuery Split Layout Plugin - flexLayout

flexLayout is a lightweight and highly customizable jQuery plugin used for generating a horizontal or vertical split layout with any number of resizable content sections.

https://www.jqueryscript.net/layout/Lightweight-Customizable-jQuery-Split-Layout-Plugin-flexLayout.html

[Demo] [Download]

Lightweight Grid View With Expanding Preview - Inline Popup

Inline Popup is a jQuery plugin for creating a responsive grid view that allows to displays more details in a popup-style expanding panel similar to the effect seen on Google Images.

https://www.jqueryscript.net/layout/Lightweight-Grid-View-With-Expanding-Preview-Inline-Popup.html

[Demo] [Download]

Accordion-style Expanding Grid View With jQuery - Gridacord.js

Gridacord.js is a fancy jQuery plugin for creating an Accordion-like grid view where the grid item will expand to the full size while shrinking the others on roll over.

https://www.jqueryscript.net/gallery/Accordion-style-Expanding-Grid-View-jQuery-Gridacord-js.html

[Demo] [Download]

Dynamic Responsive Tiled Layout Plugin For jQuery - wallyti

wallyti.js is a small (~3kb minified) jQuery plugin for creating a responsive, fluid grid layout that will dynamically positions tiled blocks depending on the screen width.

https://www.jqueryscript.net/layout/Dynamic-Responsive-Tiled-Layout-Plugin-jQuery-wallyti.html

[Demo] [Download]

Adpative Cascading Grid Layout Plugin With jQuery - GridMaker

GridMaker is a simple, tiny jQuery plugin that helps you generate a responsive, adaptive, cascading grid layout from block elements with different sizes.

https://www.jqueryscript.net/layout/Adpative-Cascading-Grid-Layout-Plugin-With-jQuery-GridMaker.html

[Demo] [Download]

Simple Responsive Grid Layout Plugin - jQuery Drystone.js

Drystone.js is a tiny, simple-to-use jQuery plugin to create a fully responsive grid layout where you can set the amount of columns at different breakpoints.

https://www.jqueryscript.net/layout/Responsive-Grid-Layout-jQuery-Drystone.html

[Demo] [Download]

Equal-height Tile Layout Plugin For jQuery - Tile.js

Tile.js is a tiny, fast and easy-to-use jQuery plugin for generating a neat grid layout with equal-height tiled blocks.

https://www.jqueryscript.net/layout/Equal-height-Tile-Layout-Plugin-For-jQuery-Tile-js.html

[Demo] [Download]

jQuery Plugin To Create An Instagram Photo Grid - EveryDayImInstagrammin

EveryDayImInstagrammin is a jQuery plugin for generating a responsive photo grid that fetches and displays the latest Instagram pictures by user or hashtag.

https://www.jqueryscript.net/social-media/jQuery-Plugin-To-Create-An-Instagram-Photo-Grid-EveryDayImInstagrammin.html

[Demo] [Download]

Responsive Equal Height Grid Layout Plugin For jQuery - Wrecker

Wrecker is a lightweight, responsive jQuery equal height plugin for your grid layout where the cells of each row are equal in height based on their contents.

https://www.jqueryscript.net/layout/Responsive-Equal-Height-Grid-Layout-Plugin-For-jQuery-Wrecker.html

[Demo] [Download]

Minimal Dynamic Grid Layout Generator With jQuery - Gridagram

Gridagram is a very small jQuery plugin that lets you dynamically generate and manage grid layouts in an easy way.

https://www.jqueryscript.net/layout/Minimal-Dynamic-Grid-Layout-Generator-With-jQuery-Gridagram.html

[Demo] [Download]

jQuery Plugin For Responsive Resizable Grid Layout - Resizeable.js

A tiny jQuery plugin used for creating responsive, resizable grid layouts where the grid will auto resize to within the browser window while preserving the original aspect ratio.

https://www.jqueryscript.net/layout/jQuery-Plugin-For-Responsive-Resizable-Grid-Layout-Resizeable-js.html

[Demo] [Download]

Powerful Equal Height Grid Plugin With jQuery - equalHeights.js

Just another Responsive equal height jQuery plugin which has the ability to equalize the height of grid items row by row.

https://www.jqueryscript.net/layout/Powerful-Equal-Height-Grid-Plugin-With-jQuery-equalHeights-js.html

[Demo] [Download]

Metro Style jQuery Tiled Grid Layout Plugin - HeightMatch

HeightMatch is a jQuery plugin used for creating Windows Metro style tiled grid layout that automatically adjusts the height of elements depending on the tallest one within the other layout column.

https://www.jqueryscript.net/layout/Metro-Style-jQuery-Tiled-Grid-Layout-Plugin-HeightMatch.html

[Demo] [Download]

Tiny Equal Height Plugin For Bootstrap Grid System - bootstrap-grid-columns.js

A very small jQuery plugin for Bootstrap grid system that responsively and automatically equalizes the height of columns row by row.

https://www.jqueryscript.net/layout/Tiny-Equal-Height-Plugin-For-Bootstrap-Grid-System---bootstrap-grid-columns-js.html

[Demo] [Download]

Responsive Square Grid Layout For jQuery - Square.js

Square.js is a lightweight and simple-to-use jQuery plugin for dynamically render a responsive, cross-platform square grid layout from a group of DOM elements.

https://www.jqueryscript.net/layout/Responsive-Square-Grid-Layout-jQuery.html

[Demo] [Download]

jQuery Plugin For Cross-browser Multi-column Layout - column.js

column.js is a jQuery plugin used for creating cross-browser, multi-column layout where content can be flowed into multiple columns with a gap and a rule between them.

https://www.jqueryscript.net/layout/jQuery-Plugin-For-Cross-browser-Multi-column-Layout-column-js.html

[Demo] [Download]

Flexbox Based Responsive Justified Layout With jQuery - Flex Gallery

A jQuery plugin which uses CSS3 Flexible Box to create a responsive, justified grid layout and gallery for showcasing your images in a Google Photos-like fashion.

https://www.jqueryscript.net/gallery/Flexbox-Justified-Layout-jQuery-Flex-Gallery.html

[Demo] [Download]

Easy Resizable Splitter/Layout Plugin For jQuery - SplitterBar

A lightweight jQuery split/layout plugin that creates vertical bars to divide the container into several resizable sections.

https://www.jqueryscript.net/layout/Resizable-Splitter-Layout-jQuery-SplitterBar.html

[Demo] [Download]

jQuery Plugin For Creating Elastic Page Layouts - Emlastic

Emlastic is a jQuery plugin used for creating elastic web layout using em that allows to automatically and dynamically scale web elements according to the screen size.

https://www.jqueryscript.net/layout/jQuery-Plugin-For-Creating-Elastic-Page-Layouts-Emlastic.html

[Demo] [Download]

Easy Split Layout Plugin For jQuery - Splitter

Splitter is a simple, customizable jQuery split layout plugin that enables the users to quickly resize layout items by dragging the splitter bar.

https://www.jqueryscript.net/layout/Split-Layout-Plugin-jQuery-Splitter.html

[Demo] [Download]