10 Best JavaScript & CSS Responsive Grid Layouts (2020 Update)

In today’s web development, developers tend to use CSS Flexbox or CSS Grid Layout to create responsive and cross-platform grid layouts.

But it is a difficult task for beginners to create a proper grid layout to fit their design needs using complex CSS rules

This is why I list here the 10 best JavaScript & Pure CSS solutions to help web developers quickly and easily generate a responsive grid layout for modern webpages or web applications. I hope you like it and don’t forget to spread the world.

Originally Published Nov 14 2017, updated Jan 13 2020

1. Responsive, Draggable, Filterable Grid Layout – muuri

muuri

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

Demo Download


2. Versatile Grid Layout System – packery

Versatile Grid Layout System - packery

Packery is a versatile layout system designed to simplify the task of creating responsive, cross-platform grids for the modern web layout.

Demo Download


3. Dynamic Grid Layout Generator – Magic Grid

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.

Demo Download


4. Sortable and Filterable Grid of Items – Shuffle

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 responsive & Filterable Portfolio website.

Demo Download


5. Lightweight Mobile CSS Layout Library – flex.css

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.

Demo Download


6. Creating A Flickr-style Justified Layout With JavaScript

Creating A Flickr-style Justified Layout With JavaScript

Demo Download

A standalone, CSS-less JavaScript library that lets you create a Flickr-style justified layout for your photo gallery.


7. Layout Grid

Layout Grid

Demo Download

Static responsive grid with pure css. Javascript using native drag-n-drop to reorder for each screen size on desktop and mobile.


8. waterfall.js

pinterest-grid-waterfall

Just another pure JavaScript library that creates a responsive, fluid, Pinterest inspired grid to showcase your products, services, designs, etc. Also known as Masonry Layout.

Demo Download


9. Customizable Masonry Layout In Pure CSS – Driveway.css

Customizable Masonry Layout In Pure CSS - Driveway.css

Driveway.css is a pure CSS library to generate a responsive, interactive, customizable, Masonry-style layout using pure HTML/CSS.

Demo Download


10. Tiny 12-column Flexbox Grid – ragrid.css

ragrid

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.

Demo Download


More Resources:

Thanks for reading!

Looking for more JavaScript and CSS solutions to build grid layouts on modern web applications?  Here are a few more resources available online:

You Might Be Interested In: