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

Table of contents:

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

jQuery Masonry Layout Plugins:

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

A jQuery & Vanilla JavaScript Plugin that lays out a series of elements in a dynamic, filterable, multi-column grid layout just as you've seen on Pinterest.com.

[Demo] [Download]

---

Create A Dynamic Responsive Masonry Layout In jQuery - Elastic Columns

A lightweight jQuery plugin for creating flexible responsive Masonry-like layouts inspired by Masonry.js and Isotope.js.

The plugin equalizes the width of grid items and re-arranges them in a fluid grid layout similar to Pinterest.

[Demo] [Download]

---

Minimal Responsive Masonry Layout Plugin - jQuery column-sorter.js

This lightweight (less than 1kb) jQuery plugin allows you to easily convert elements with different heights in your page into a responsive masonry layout that mimics Pinterest's page layout. It is built on top of CSS flexbox and can be used easily in any kind of project, small or large, as a basic plugin that will fit anyone's needs even without any customization.

[Demo] [Download]

---

Masonry-like Responsive Cascading Grid Layout Plugin - MosaicJS

A Masonry inspired robust jQuery grid layout plugin which takes a list of DIV elements and arrange them in a responsive, dynamic tile mosaic grid.

[Demo] [Download]

---

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]

---

Vanilla JavaScript Masonry Layouts:

Adaptive Image Gallery With Masonry Grid Layout

A lightweight photo gallery that showcases your images in a responsive Masonry grid layout.

It leverages JavaScript to detect screen size and reorder gallery elements accordingly. Images are arranged in a flexible grid with evenly-spaced columns.

As you resize your browser, the gallery automatically transitions between column layouts (from 4 rows on wide screens to 1 row on mobile).

This responsive behavior ensures images are legible and effectively displayed without stretching or overflow issues.

[Demo] [Download]

---

Simple Masonry Grid Layout With Flexbox – simple-masonry.js

A lightweight Vanilla JS library to help you generate a responsive, mobile-friendly Masonry grid layout using CSS flexbox.

[Demo] [Download]

---

Responsive Masonry Layouts with CSS Grid and Mason-it.js

A lightweight JavaScript library that transforms CSS Grid powered layout into a responsive masonry layout while preserving your original grid design.

[Demo] [Download]

---

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]

---

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]

---

Pure CSS Masonry Layouts:

Minimalist Masonry Gallery Layout With CSS Grid – mm-masonry.css

A CSS library that makes use of CSS Grid to create flexible, fluid, Masonry-style image grids similar to Pinterest and Tumblr layouts.

[Demo] [Download]

---

Responsive CSS Masonry Grid Layout – Grid Overflow

A CSS library for creating responsive Masory- and Mosaic-style grid layouts with optional 3D hover effects.

[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