10 Best jQuery/JavaScript Masonry Layout Plugins (2022 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 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.
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.
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.
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.
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.
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.
MiniMasonry.js
A lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.
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.
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.
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.
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