Top 10 JavaScript & CSS Responsive Grid Layouts Of 2018

Here is a constantly updated list of the 10 best JavaScript and CSS based responsive grid layouts we published on CSSScript.com. I hope you like it and don’t forget to spread the world.

Originally Published Nov 14 2017, updated Dec 09 2018

1. 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 responsive, fluid waterfall grid layout as you seen on Pinterest.com.


2. Minimalist Grid Layout With Pure JavaScript – minigrid

minigrid

Demo Download

minigrid is a standalone JavaScript library used to generate a responsive, flexible, customizable grid layout for your next web design. Without the need of any 3rd dependencies like jQuery, etc.


3. Lightweight Masonry-like Grid Layout Library – Bricklayer

Bricklayer

Demo Download

Bricklayer is a JavaScript library for generating a responsive, dynamic, Masonry- and Pinterest-like cascading grid layout for your web project.


4. Responsive, Draggable, Filterable Grid Layout – muuri

muuri

Demo Download

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


5. Lightweight Masonry Layout Library – Macy.js

macy.js

Demo Download

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


6. Atomic Bulldog Grid

CSS(SCSS) Grid Layout – Atomic Bulldog Grid

Demo Download

Atomic Bulldog Grid is 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.


7.  BackPack.css

Lightweight Responsive CSS Grid Framework – BackPack.css

Demo Download

BackPack.css is a small CSS grid framework which helps you generate a fully responsive, 12-column based grid layout for modern web design.


8. SMART CSS GRID

0.5kb Responsive CSS Grid Framework – SMART CSS GRID

Demo Download

SMART CSS GRID is an ultra-light (~0.5kb minified) CSS grid framework to create responsive, flexible, fluid, 12-column grid layout for your modern web app.


9. sortableJs

Filterable Masonry Grid In JavaScript – sortableJs

Demo Download

sortableJs is a lightweight and easy-to-use JavaScript plugin to filter through a set of grid items with a subtle shuffle effect.


10. flexy.css

Minimal CSS Layout Framework Based On Flexbox – flexy

Demo Download

Yet another CSS framework to create a responsive, justified/fluid grid of elements using CSS flexbox. Just weights in 0.3kb (minified) and super flexible.