jQuery Script Blog

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

by jQueryScript,
grid layoutMasonry

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:

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.

Pinterest Style Dynamic Layout jQuery Plugin - Masonry

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

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.

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

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

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.

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

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

Responsive, Draggable, Filterable Grid Layout – muuri

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

Dynamic Grid Layout Generator - Magic Grid

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.

Super Tiny Pinterest-style Grid Library – waterfall.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]

Fluid Masonry Layout Using CSS Grid

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

Responsive Grid Layout Builder In Vanilla JavaScript – EasyGrid

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