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:
Originally Published Mar 2019, updated Feb 02 2024
Table of contents:
jQuery Masonry Layout Plugins:
A lightweight jQuery plugin for creating flexible responsive Masonry-like layouts inspired by Masonry.js and Isotope.js.
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.
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.
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.
A lightweight Vanilla JS library to help you generate a responsive, mobile-friendly Masonry grid layout using CSS flexbox.
Pure CSS Masonry Layouts:
A CSS library that makes use of CSS Grid to create flexible, fluid, Masonry-style image grids similar to Pinterest and Tumblr layouts.
Yet another responsive, fluid, masonry layout built using CSS grid layout system.