10 Best jQuery/JavaScript Masonry Layout Plugins (2020 Update)

by jQueryScript,

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.

Pinterest Style Dynamic Layout jQuery Plugin - Masonry

[Demo] [Download]


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.

Lightweight and Dynamic Javascript Grid Layout - Salvattore

[Demo] [Download]


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.

Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

[Demo] [Download]


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.

jQuery Plugin For Justified Image Gallery - Justified-Gallery

[Demo] [Download]


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.

Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

[Demo] [Download]


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.

Create A Sortable and Filterable Grid of Items - Shuffle

[Demo] [Download]


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.

Tiny Masonry Grid Layout Plugin In JavaScript - Colcade.js

[Demo] [Download]


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 JavaScript / CSS Powered Photo Gallery Popup – zoomwall.js

[Demo] [Download]


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.

Customizable Masonry Layout In Pure CSS – Driveway.css

[Demo] [Download]


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.

Tiny 12-column Flexbox Grid – ragrid.css

[Demo] [Download]


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.

See also: