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
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
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 is a versatile JavaScript library that helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.
4. 3D Hexagon Grid Layout
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
Magic Grid is a lightweight (3kb minified) JavaScript library to generate a dynamic, flexible grid layout using pure JavaScript.
6. flexmasonry
A lightweight JavaScript layout library which dynamically renders a Masonry-like grid layout using CSS3 flexbox.
7. Diamond Grid Layout
A pure CSS diamond grid layout which transforms the blocks into diamonds using CSS3 rotate transform.
8. Atomic Bulldog Grid
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
A lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.
10. Hexi-Flexi Grid
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: