10 Best JavaScript & CSS Responsive Grid Layouts (2021 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 21 2021

1. flexbin.css

flexbin.css

Demo Download

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.


2. Pinterest-like Responsive Fluid Grid Layout

Pinterest-like Responsive Fluid Grid Layout

Demo Download

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


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


4. 3D Hexagon Grid Layout

3D Hexagon Grid Layout

Demo Download

A 3D hexagon(honeycomb) grid layout with cool hover effects, built on top of CSS3 transitions and transforms.


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


6. flexmasonry

flexmasonry

Demo Download

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


7. Diamond Grid Layout

Diamond Grid Layout

Demo Download

A pure CSS diamond grid layout which transforms the blocks into diamonds using CSS3 rotate transform.


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. MiniMasonry.js

MiniMasonry.js

Demo Download

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


10. Hexi-Flexi Grid

Hexi-Flexi Grid

Demo Download

An SCSS component used to render a responsive, flexible, customizable hexagon layout using CSS grid layout.


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: