10 Best jQuery/JavaScript Masonry Layout Plugins (2020 Update)
What Is Masonry Layout:
The Masonry layout is a modern grid layout system that dynamically places grid items with different sizes in a responsive, fluid, vertical layout as you see on Pinterest.com.
The Best Masonry Layout:
In this article, I'd like to introduce the 10 best jQuery, vanilla JavaScript, and Pure CSS libraries that help web developers to quickly implement the Masonry Layout on the modern web/mobile project. Have fun.
Originally Published Mar 2019, updated Feb 20 2020
Table of contents:
jQuery Masonry Layout Plugins:
Pinterest Style Dynamic Layout jQuery Plugin - Masonry
Masonry is a Pinterest Style Dynamic Grid Layout jQuery Plugin for modern web & mobile design.
Lightweight and Dynamic Javascript Grid Layout - Salvattore
Salvattor is a javascript layout library that enables you to create customizable and dynamic grid layout with html5 data-* attributes and CSS-driven configuration. A good alternative to the jQuery Masonry plugin.
Responsive jQuery Dynamic Grid Layouts Plugin - Freewall
Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet.
jQuery Plugin For Justified Image Gallery - Justified-Gallery
Justified-Gallery is a simple and fast jQuery plugin that automatically adjust the width and height of your images to create a justified image gallery on your web site.
Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
Wookmark is a jQuery Plugin that lays out a series of elements in a dynamic column grid.
Vanilla JavaScript Masonry Layouts:
Create A Sortable and Filterable Grid of Items - Shuffle
Shuffle is a responsive Vanilla JavaScript (ES6) plugin for categorizing your grid of items to make them sortable, searchable and filterable.
Tiny Masonry Grid Layout Plugin In JavaScript - Colcade.js
Colcade.js is the minimal version of the famous Masonry plugin that helps developers generate responsive, fluid, blazing fast grid layout in jQuery or Vanilla JavaScript.
Pure JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js
zoomwall.js is a JavaScript library for creating a neat, compact thumbnail grid which expands into a fullscreen gallery lightbox as you click on a thumbnail image.
Pure CSS Masonry Layouts:
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.
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:
Want more jQuery plugins or JavaScript libraries to create awesome Masonry Layout on the web & mobile? Check out the jQuery Masonry Layout and JavaScript/CSS Masonry Layout sections.