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

Table of contents:

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

jQuery Masonry Layout Plugins:

Responsive & Fluid Drag-and-Drop Grid Layout with jQuery - gridstack.js

Gridstack.js is a vanilla JavaScript widget/grid layout plugin inspired by Gridster that allows you to dynamically and responsively rearrange grid items through drag and drop.

[Demo] [Download]

---

Super Simple jQuery Pinterest-Style Grid Layout - Boxify.js

Boxify.js is a super lightweight (~1kb minified) and easy jQuery plugin to implement a pinterest-style fluid grid layout on your website.

[Demo] [Download]

---

Small Responsive Masonry Grid In jQuery

Masonry Grid is a tiny and responsive jQuery grid layout plugin that places elements of varying heights in a column-based fluid grid as you've seen on Pinterest.com.

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

---

Responsive Masonry/Pinterest Like Grid Layout For Bootstrap 4/3

The bootstrap.masonry.js jQuery plugin transforms the regular Bootstrap grid system into a responsive, fluid grid layout similar to the Pinterest or Masonry.

[Demo] [Download]

---

Vanilla JavaScript Masonry Layouts:

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

A pure JavaScript solution used to create a responsive, fluid waterfall grid layout as you see on Pinterest.com.

[Demo] [Download]

---

MiniMasonry.js

A lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.

[Demo] [Download]

---

Masonry Grid Layout With Vanilla JavaScript – Gridify

A vanilla JavaScript layout plugin used to arrange your grid items in a Masonry-style layout using pure JavaScript.

[Demo] [Download]

---

Pure CSS Masonry Layouts:

Masonry Layout With JavaScript and CSS Flexbox – flexmasonry

A lightweight JavaScript layout library which dynamically renders a Masonry-like grid layout using CSS3 flexbox.

[Demo] [Download]

---

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]

---

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