10 Best Grid Layout Systems In JavaScript And CSS (2024 Update)

by jQueryScript,

What is Grid Layout

Grid layout is one of the most popular cross-platform layout design concepts in modern web & mobile design.

The grid layout dynamically resizes and arranges grid items in a responsive, multi-column, card-style UI depending on the screen size.

The Best Grid Layout System

In this blog post you will find the 10 best responsive grid layout systems implemented in jQuery, Vanilla JavaScript, or even Pure CSS/CSS3. I hope you like it.

Originally Published Nov 22 2017, updated Feb 02 2024

Table of contents:

jQuery Grid Layout Plugins:

Responsive & Fluid Drag-and-Drop Grid Layout with jQuery - gridstack.js

Gridstack.js is a vanilla JavaScript widget/grid layout plugin inspired by Gridster that allows you to dynamically and responsively rearrange grid items through drag and drop.

Responsive & Fluid Drag-and-Drop Grid Layout with jQuery - gridstack.js

[Demo] [Download]


Isotope - Magical Dynamic Layout Plugin For jQuery

A Magical Dynamic Layout Plugin features Layout modes(Intelligent, dynamic layouts that can’t be achieved with CSS alone.), Filtering (Hide and reveal item elements easily with jQuery selectors) and Sorting (Re-order item elements with sorting.

Isotope - Magical Dynamic Layout Plugin For jQuery

[Demo] [Download]


Responsive & Filterable jQuery Portfolio Gallery Plugin - Elastic Grid

Elastic Grid is a powerful, responsive, interactive, filterable jQuery & CSS3 image gallery plugin designed for portfolio websites.

Responsive & Filterable jQuery Portfolio Gallery Plugin - Elastic Grid

[Demo] [Download]


Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

A jQuery & Vanilla JavaScript Plugin that lays out a series of elements in a dynamic, filterable, multi-column grid layout just as you've seen on Pinterest.com.

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

[Demo] [Download]


Create A Sortable and Filterable Grid of Items - Shuffle

Shuffle is a responsive jQuery plugin for categorizing your grid of items to make them sortable, searchable and filterable.

Create A Sortable and Filterable Grid of Items - Shuffle

[Demo] [Download]


Vanilla JS Grid Layout Libraries:

Responsive, Draggable, Filterable Grid Layout – muuri

A versatile JavaScript library that helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.

Responsive, Draggable, Filterable Grid Layout – muuri

Dynamic Grid Layout Generator – Magic Grid

Magic Grid is a lightweight (3kb minified) JavaScript library to generate a dynamic, flexible grid layout using pure JavaScript.

Dynamic Grid Layout Generator - Magic Grid

Demo Download

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

A pure JavaScript solution used to create a responsive, fluid waterfall grid layout as you see on Pinterest.com.

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Demo Download


Pure CSS Grid Layout System:

flexbin.css

A lightweight, flexible CSS library which lets you create responsive, neat, justified grid layout for showcasing your photos as you seen on Google Image Search and Flickr. Heavily based on CSS3 flexbox and fully customizable via SCSS.

flexbin.css

Demo Download


Responsive 12-column Grid Layout – SpaceGrid

A lightweight CSS library used to render a responsive, 12-column grid layout for your modern web design.

Responsive 12-column Grid Layout – SpaceGrid

[Demo] [Download]


More Resources:

Looking for more jQuery plugins or JavaScript libraries to create awesome Grid Layouts on the web & mobile? See jQuery Grid Layout and JavaScript/CSS Grid Layout sections for more details.

See Also: