jQuery Script Blog

10 Best jQuery/JavaScript Masonry Layout Plugins (2024 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 Feb 02 2024

Table of contents:

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.

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

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

Create A Dynamic Responsive Masonry Layout In jQuery - Elastic Columns

[Demo] [Download]

Small Responsive Masonry Grid In jQuery

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]

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]

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.

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

[Demo] [Download]

Vanilla JavaScript Masonry Layouts:

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.

masonry-grid-layout-flexbox

[Demo] [Download]

Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

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

Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

[Demo] [Download]

Create Masonry Layouts Based On CSS Grid Values – JS Masonry

A super tiny JavaScript library for building responsive Masonry layouts based on CSS Grid values.

Create Masonry Layouts Based On CSS Grid Values - JS Masonry

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

masonry-gallery-layout

[Demo] [Download]

Fluid Masonry Layout Using CSS Grid

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

Fluid Masonry Layout Using CSS Grid

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: