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 is a versatile JavaScript library that helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.
2. 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.
3. 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.
4. 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.
5. 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.
6. Creating A Flickr-style Justified Layout With JavaScript
A standalone, CSS-less JavaScript library that lets you create a Flickr-style justified layout for your photo gallery.
7. Layout Grid
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
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.
9. 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.
10. 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.
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: