10 Best jQuery/JavaScript Masonry Layout Plugins (2023 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
Fluid Masonry Layout Using CSS Grid
Yet another responsive, fluid, masonry layout built using CSS grid layout system.
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