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

Table of contents:

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.

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

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

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

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

Small Responsive Masonry Grid In jQuery

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

Isotope - Magical Dynamic Layout Plugin For jQuery

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

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

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

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

[Demo] [Download]


MiniMasonry.js

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

MiniMasonry.js

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

Masonry Grid Layout With Vanilla JavaScript – Gridify

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

Masonry Layout With JavaScript and CSS Flexbox – flexmasonry

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

Customizable Masonry Layout In Pure CSS – Driveway.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: