10 Best Grid Layout Systems In JavaScript And CSS (2020 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 Jan 04 2020

Table of contents:

jQuery Grid Layout Plugins:

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.

Minimalist Masonry-style Grid Layout Plugin - Masonry.js

[Demo] [Download]


Isotope - Magical Dynamic Layout Plugin For jQuery

Isotope is 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. Sorting data can be extracted from just about anything).

Minimalist Masonry-style Grid Layout Plugin - Masonry.js

[Demo] [Download]


Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

Wookmark is a jQuery Plugin that lays out a series of elements in a dynamic column grid.

Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

[Demo] [Download]


Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet.

Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

[Demo] [Download]


jQuery Plugin For Newspaper Column Layout - Columnizer

Columnizer is a responsive jQuery plugin for generating a newspaper column layouts that automatically splits your 1 div of content into as many columns as will fit the user's browser.  

jQuery Plugin For Newspaper Column Layout - Columnizer

[Demo] [Download]


Vanilla JS Grid Layout Libraries:

Responsive, Draggable, Filterable Grid Layout – muuri

muuri is a versatile JavaScript library which helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.

Responsive, Draggable, Filterable Grid Layout – muuri

[Demo] [Download]


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]


Sortable and Filterable Grid of Items - Shuffle

Shuffle is a responsive JavaScript plugin for categorizing your grid of items to make them sortable, searchable and filterable. With this plugin, your visitors can filter items by groups with CSS transitions. Great for creating a resonsive & Filterable Portfolio website.

Sortable and Filterable Grid of Items - Shuffle

[Demo] [Download]


Pure CSS Grid Layout System:

Lightweight Mobile CSS Layout Library – flex.css

flex.css is a lightweight CSS library that makes it easier to generate responsive, complex, cross-platform web layout for both desktop and mobile. Heavily based on CSS3 flexbox model.

Lightweight Mobile CSS Layout Library – flex.css

[Demo] [Download]


Tiny 12-column Flexbox Grid – ragrid.css

The ragrid.css provides an easy and convenient way to create a responsive, flexbox-based grid layout for your modern web project. Fully customizable via attributes instead of CSS classes.

Tiny 12-column Flexbox Grid – ragrid.css

[Demo] [Download]


More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Grid Layouts on the web & mobile? Check out the jQuery Grid Layout and JavaScript/CSS Grid Layout sections.

See Also: