10 Best JavaScript & CSS Responsive Grid Layouts (2022 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 layout libraries that 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 Feb 23 2022

1. flexbin.css

flexbin.css

Demo Download

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


2. Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

[Demo] [Download]

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


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

flexmasonry

Demo Download

A lightweight JavaScript layout library which dynamically renders a Masonry-like grid layout using CSS3 flexbox.


5. MiniMasonry.js

MiniMasonry.js

Demo Download

A lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.


6. Masonry Grid Layout With Vanilla JavaScript – Gridify

Masonry Grid Layout With Vanilla JavaScript – Gridify

[Demo] [Download]

A vanilla JavaScript layout plugin used to arrange your grid items in a Masonry-style layout using pure JavaScript.


7. Responsive, Draggable, Filterable Grid Layout – muuri

Responsive, Draggable, Filterable Grid Layout – muuri

[Demo] [Download]

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


8. Atomic Bulldog Grid

Atomic Bulldog Grid

Demo Download

A CSS(SCSS) library to generate modern, responsive, flexible grid layout using the CSS Grid Layout technology. The library also provides a fallback that uses CSS flexbox.


9. Lightweight Masonry Layout Library – Macy.js

Lightweight Masonry Layout Library – Macy.js

[Demo] [Download]

A lightweight, standalone JavaScript library for creating a Masonry- and Pinterest-like grid layout that displays images in dynamic, responsive vertical columns.


10. Mosaic Tiling With Image Lazy Loading – mosaicLayout

A JavaScript library for rendering a responsive, mobile-friendly, mosaic tiling layout (also called Masonry Layout) on the page.

Mosaic Tiling With Image Lazy Loading – mosaicLayout

[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: