10 Best jQuery/JavaScript Masonry Layout Plugins (2023 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 Jan 04 2022

Table of contents:

• jQuery Masonry Layout Plugins
• Vanilla Masonry Layouts
• Pure CSS Masonry Layouts

jQuery Masonry Layout Plugins:

Pinterest Style Dynamic Layout jQuery Plugin - Masonry

Masonry is a Pinterest Style Dynamic Layout jQuery Plugin. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

[Demo] [Download]

---

Isotope - Magical Dynamic Layout Plugin For jQuery

A Magical Dynamic Layout Plugin features Layout modes(Intelligent, dynamic layouts that can’t be achieved with CSS alone.), Filtering (Hide and reveal item elements easily with jQuery selectors) and Sorting (Re-order item elements with sorting.

[Demo] [Download]

---

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

Wookmark is a jQuery Plugin that lays out a series of elements in a dynamic column grid.

[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.

[Demo] [Download]

---

Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid

Yet another small jQuery plugin to create famous Pinterest-like responsive & fluid web grid for your website layout. Worked with Bootstrap 3 framework.

[Demo] [Download]

---

Vanilla JavaScript Masonry Layouts:

Responsive, Draggable, Filterable Grid Layout – muuri

A versatile JavaScript library that helps you create responsive, draggable, filterable, searchable grid layout with smooth animations based on Velocity.js.

[Demo] [Download]

---

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.

Demo Download

---

Super Tiny Pinterest-style Grid Library – waterfall.js

Just another pure JavaScript library that creates a responsive, fluid, Pinterest inspired grid to showcase your products, services, designs, etc.

[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.

[Demo] [Download]

---

Fluid Masonry Layout Using CSS Grid

Yet another responsive, fluid, masonry layout built using CSS grid layout system.

[Demo] [Download]

---

More Resources:

Seeking more jQuery plugins or JavaScript libraries to create awesome Masonry Layout on the web & mobile? See jQuery Masonry Layout and JavaScript/CSS Masonry Layout sections for more details.

See also:

• 10 Best JavaScript & CSS Responsive Grid Layouts
• 10 Best Grid Layout Systems In JavaScript And CSS
• Best Splitter JavaScript Libraries To Create Split Views
• Best Layout Components For React & React Native