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

by jQueryScript, 05/31/2026 04:51:00 UTC

A masonry layout can make a gallery or portfolio feel dense and easy to browse, but the wrong library can create broken image spacing, awkward mobile columns, or extra JavaScript that the page does not need. The best choice depends on the content type, the existing stack, and the amount of interaction the grid needs.

This list focuses on the 10 best jQuery and JavaScript masonry layout libraries, selected from past-year site downloads, GitHub stars when available, and editorial review. It also includes 3 bonus CSS masonry layouts for pages that only need a visual masonry effect.

Use these options to build responsive image galleries, portfolio grids, Pinterest-style feeds, card layouts, and mixed-height content grids.

Originally Published Mar 2019, updated May 31 2026

Comparison Table

Library	Best For	Live Demo
Wookmark	Filterable and sortable Pinterest-style grids.	Live Demo
Elastic Columns	Responsive column layouts with margins and refresh control.	Live Demo
column-sorter.js	Small flexbox masonry grids with column data attributes.	Live Demo
MosaicJS	Tile mosaics with rows, columns, gutters, and breakpoints.	Live Demo
Masonry	Classic cascading item placement with detailed layout options.	Live Demo
Adaptive Image Gallery	Responsive galleries with shortest-column image placement.	Live Demo
simple-masonry.js	Breakpoint-based masonry columns with custom selectors.	Live Demo
Mason-it.js	CSS Grid pages that need masonry stacking and dynamic updates.	Live Demo
muuri	Interactive grids with drag, filter, sort, and animation control.	Live Demo
Pinterest-like Responsive Fluid Grid	Waterfall layouts with selector and minimum-width options.	Live Demo
mm-masonry.css	Bonus CSS option for fluid image galleries.	Live Demo
Grid Overflow	Bonus CSS option for masonry and mosaic grids with hover effects.	Live Demo
Fluid Masonry Layout	Bonus CSS option for fixed-position mosaic grids.	Live Demo

What Is a Masonry Layout?

A masonry layout is a grid pattern that places mixed-height items into columns and reduces empty vertical space between them. It is common in image galleries, portfolio pages, card feeds, product inspiration boards, and Pinterest-style layouts.

The main value of masonry is visual density. A normal row-based grid often leaves large gaps when one card is taller than the next card. Masonry placement keeps the page compact by placing the next item into the column with the most suitable available space.

Masonry Layout vs Grid Layout

A standard grid aligns items into rows and columns. This works well when every item has a similar size, such as product cards, feature blocks, pricing cards, and dashboard tiles.

A masonry layout works better when item heights vary. Photo galleries, portfolios, blog cards, and media feeds often need this pattern because every image or card can have a different height. JavaScript masonry libraries usually handle dynamic placement, resize updates, filtering, sorting, or image-loaded recalculation. CSS masonry-style layouts work best for static galleries and visual grids.

Masonry Layout Examples and Use Cases

Photo galleries with portrait and landscape images in the same grid.
Portfolio pages with screenshots, project cards, and case study thumbnails.
Pinterest-style inspiration boards with mixed media cards.
Blog and news card layouts with different excerpt lengths.
Directory grids that need filtering, sorting, or dynamic item updates.
CSS-only image mosaics where the page does not need filtering or drag behavior.

Best jQuery Masonry Layout Plugins

Pinterest-Like Dynamic Grid Layout In JavaScript - Wookmark

Best For: Wookmark is best for Pinterest-style galleries that need filtering, sorting, and resize-aware relayout.

Wookmark lays out mixed-height items in a dynamic multi-column grid. It handles filtering, sorting, resize relayout, endless-scroll examples, and image-heavy layouts that use ImagesLoaded.

Key Features:

Dynamic multi-column item placement.
Responsive grid behavior.
Automatic layout updates on browser resize.
Grid filtering.
Item sorting.
Endless-scroll examples.
ImagesLoaded compatibility for image-heavy layouts.
NPM installation support.

Recommended Use Case: Use Wookmark for a gallery or inspiration board where users filter or sort mixed-height cards.

[Demo] [Download]

Create A Dynamic Responsive Masonry Layout In jQuery - Elastic Columns

Best For: Elastic Columns is best for responsive card grids that need controlled columns, margins, and refresh behavior.

Elastic Columns creates flexible masonry-like layouts with equal-width grid items. It exposes column, margin, refresh, set, and destroy controls for layout management.

Key Features:

Equal-width grid item layout.
Fluid rearrangement for responsive pages.
Configurable column count.
Runtime column changes with the `set` method.
Manual layout refresh.
Inner margin control.
Outer margin control.
Instance destroy method.

Recommended Use Case: Use Elastic Columns for a jQuery card grid where editors need predictable columns and adjustable spacing.

[Demo] [Download]

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

Best For: column-sorter.js is best for small layouts that need a quick masonry effect with a declared column count.

column-sorter.js converts uneven-height elements into a masonry layout built on flexbox. It uses data attributes for column count and a simple card/list HTML structure.

Key Features:

Uneven-height item placement.
Flexbox-based masonry behavior.
Responsive layout handling.
`data-cols` column count control.
Card-style HTML item structure.
Small script footprint.

Recommended Use Case: Use column-sorter.js for a simple card or image grid that does not need filtering, sorting, or advanced animation.

[Demo] [Download]

Masonry-like Responsive Cascading Grid Layout Plugin - MosaicJS

Best For: MosaicJS is best for tile-based mosaic layouts that need rows, columns, gutters, and breakpoints.

MosaicJS arranges DIV tiles into a responsive dynamic mosaic grid. It exposes row, column, gutter, width, height, percentage, and breakpoint settings.

Key Features:

Dynamic tile mosaic placement.
DIV-based tile structure.
Column count option.
Row count option.
Gutter spacing option.
Column width and row height controls.
Percentage-based layout option.
Breakpoint configuration.

Recommended Use Case: Use MosaicJS for a media wall or landing-page tile layout where items need deliberate row and column spans.

[Demo] [Download]

Pinterest Style Dynamic Layout jQuery Plugin - Masonry

Best For: Masonry is best for classic cascading grids that need mature layout controls.

Masonry places each element in the next open vertical space in the grid. It includes selectors, sizing, gutter, percentage positioning, stamped elements, and animation timing controls.

Key Features:

Cascading placement based on available vertical space.
Item selector configuration.
Column width configuration.
Element sizing for responsive layouts.
Gutter spacing option.
Percent-position layouts.
Fit-width container sizing.
Stamped elements that affect layout placement.
Transition duration and stagger controls.

Recommended Use Case: Use Masonry for a classic image gallery or card feed that needs stable layout options and detailed spacing control.

[Demo] [Download]

Best Vanilla JavaScript Masonry Layouts

Adaptive Image Gallery With Masonry Grid Layout

Best For: Adaptive Image Gallery is best for responsive photo grids that place images into the shortest available column.

Adaptive Image Gallery displays image arrays in a responsive masonry grid. It calculates item height from image dimensions, places images into the shortest column, and updates the layout on resize.

Key Features:

Responsive masonry photo gallery.
Screen-size detection.
Column changes for wide, medium, and mobile screens.
Flexible grid with evenly spaced columns.
Shortest-column image placement.
Image height calculation from stored width and height values.
Resize listener for layout updates.
DOM output generated from an image array.

Recommended Use Case: Use Adaptive Image Gallery for a photo page where portrait and landscape images need balanced columns on different screens.

[Demo] [Download]

Simple Masonry Grid Layout With Flexbox – simple-masonry.js

Best For: simple-masonry.js is best for flexbox masonry grids that need breakpoint-specific column settings.

simple-masonry.js creates a responsive masonry grid with a flexbox layout model. It uses configurable column counts, breakpoint settings, selectors, and active classes.

Key Features:

Flexbox-based masonry layout.
Configurable column count.
Breakpoint-specific column settings.
Custom target selector.
Custom active class.
Custom list selector.
Custom item selector.
IE11 support file in the usage example.

Recommended Use Case: Use simple-masonry.js for a responsive card grid where each breakpoint needs a known column count.

[Demo] [Download]

Responsive Masonry Layouts with CSS Grid and Mason-it.js

Best For: Mason-it.js is best for CSS Grid layouts that need masonry stacking but should keep their grid columns and gaps.

Mason-it.js adds masonry behavior to layouts already powered by CSS Grid. It preserves `grid-template-columns` and `gap`, then recalculates layout through initialization, mutation handling, and animation-frame updates.

Key Features:

CSS Grid based masonry placement.
Preserves `grid-template-columns`.
Preserves grid `gap` values.
Data attribute initialization.
JavaScript initialization through `MasonIt.init()`.
Dynamic content handling with `MutationObserver`.
Layout recalculation with `requestAnimationFrame`.
Recalculation for hidden elements that become visible.

Recommended Use Case: Use Mason-it.js for a CSS Grid-based dashboard, gallery, or card page where items can be added, removed, hidden, or revealed.

[Demo] [Download]

Responsive, Draggable, Filterable Grid Layout – muuri

Best For: muuri is best for interactive masonry-style grids that need drag, filter, sort, show, hide, and event control.

muuri is a full-featured grid layout library for interactive interfaces. It handles filtering, sorting, dragging, item movement, show/hide animation, and event hooks after the grid has loaded.

Key Features:

Responsive grid layout.
Show and hide animations.
Filtering.
Sorting.
Drag and drop.
Drag sorting.
Add and remove item methods.
Move and send methods for item repositioning.
Event hooks for layout, filter, sort, move, send, drag, and destroy actions.

Recommended Use Case: Use muuri for a portfolio, product board, or dashboard grid where users actively filter, sort, and rearrange items.

[Demo] [Download]

Pinterest-like Responsive Fluid Grid Layout with Pure JavaScript

Best For: Pinterest-like Responsive Fluid Grid is best for waterfall layouts with selector-based setup and minimum item width control.

This JavaScript library creates a responsive waterfall grid with image-and-content boxes. It uses a container selector, item selector, minimum item width, centered container, and media-query sizing examples.

Key Features:

Responsive fluid waterfall grid.
Container selector option.
Box selector option.
Minimum box width option.
Image-and-content card structure.
Centered fluid container.
Media-query sizing examples.

Recommended Use Case: Use this option for a Pinterest-style feed where each item contains an image plus a short text block.

[Demo] [Download]

Bonus: Pure CSS Masonry Layouts

Minimalist Masonry Gallery Layout With CSS Grid – mm-masonry.css

Best For: mm-masonry.css is best for CSS Grid image galleries with custom width, height, column, and gap values.

mm-masonry.css creates a fluid masonry-style gallery with CSS Grid. It uses CSS custom properties for item width, item height, column width, gaps, and inline overrides.

Key Features:

CSS Grid masonry-style image layout.
Flexible fluid gallery structure.
Per-item width custom property.
Per-item height custom property.
Column width custom property.
Gap custom property.
Inline layout overrides.
Disable option noted in the changelog.

Recommended Use Case: Use mm-masonry.css for a static gallery where editors can define image dimensions and spacing through CSS variables.

[Demo] [Download]

Responsive CSS Masonry Grid Layout – Grid Overflow

Best For: Grid Overflow is best for CSS masonry and mosaic grids that need captions, item shape classes, and optional hover effects.

Grid Overflow creates responsive masonry-style and mosaic-style grids with CSS classes. It includes item shape presets, captions, optional action icons, hover effects, and CSS variable controls.

Key Features:

Masonry mode through the `go-masonry` class.
Mosaic-style grid layouts.
Optional 3D hover effects.
Optional action icon.
Captions and full-width captions.
Horizontal, vertical, large square, and centered item classes.
CSS variables for item width, aspect ratio, gap, mobile row count, action icon, rounding, and masonry item height.
Safari workaround noted in the changelog.

Recommended Use Case: Use Grid Overflow for a CSS-only media grid where each tile needs a different shape or caption treatment.

[Demo] [Download]

Fluid Masonry Layout Using CSS Grid

Best For: Fluid Masonry Layout is best for fixed-position CSS Grid mosaics with image coverage and small-screen layout changes.

Yet another solution creates a Pinterest-like grid with CSS Grid rows, columns, and named cell classes. It uses manual grid placement, row and column gaps, responsive media queries, and `object-fit: cover` image sizing.

Key Features:

CSS Grid masonry layout.
Pinterest-like visual structure.
Defined grid columns and rows.
Row and column gaps.
Manual cell placement by grid column and row.
Responsive media-query switch for small screens.
Full image coverage with `object-fit: cover`.

Recommended Use Case: Use this option for a static homepage section, gallery header, or curated visual grid with planned tile positions.

Demo Download

How to Choose

Start with the content model. Image-heavy pages need good handling for changing image heights. Card grids need predictable item width and spacing. Interactive directories need filtering, sorting, or dragging.

Choose a jQuery masonry plugin when the existing site already loads jQuery and the grid needs to fit older code. Wookmark is the stronger choice for filtering and sorting. Elastic Columns is better for column and margin control. MosaicJS is better for tile mosaics.

Choose a vanilla JavaScript masonry library when the page should not depend on jQuery. Mason-it.js is the strongest fit for CSS Grid projects. muuri is the best option here for interactive filtering, sorting, dragging, and item management.

Choose a CSS masonry layout when the page only needs visual packing for images or cards. The bonus CSS options are best for static galleries, planned mosaics, and pages where interaction is not part of the requirement.

FAQ

Q: What is the best masonry JS library?
A: Masonry is the best classic option for cascading grid layouts with detailed spacing and sizing controls. muuri is better when the grid needs filtering, sorting, dragging, and item events.

Q: What is the best jQuery masonry plugin?
A: Wookmark is the strongest jQuery-focused option for filterable and sortable Pinterest-style grids. Elastic Columns is a better fit when the layout mainly needs column count, margin, refresh, and destroy controls.

Q: Can CSS replace a masonry JavaScript library?
A: CSS can create masonry-style galleries and planned mosaic layouts. JavaScript is still the better choice when the layout needs filtering, sorting, dragging, dynamic item changes, or recalculation after image loading.

Q: Why do masonry layouts break after images load?
A: The grid can calculate item positions before image heights are final. Use a library that supports image-aware relayout, shortest-column placement, or manual refresh after images finish loading.

Q: Should I use masonry layout for every card grid?
A: No. A standard grid is better when every card has a similar height or when rows must align. Masonry is better for mixed-height content where compact vertical spacing matters more than row alignment.

Q: Which masonry layout works best for portfolios?
A: Wookmark, Masonry, Adaptive Image Gallery, and muuri all fit portfolio pages. Choose Wookmark or Masonry for classic galleries, Adaptive Image Gallery for photo-heavy pages, and muuri for filterable or draggable portfolios.

Q: What is the difference between masonry and waterfall layout?
A: The terms often describe the same visual pattern: items flow into columns and create a packed vertical layout. Waterfall layout usually refers to the Pinterest-style effect where new items keep filling the shortest column.

Comparison Table

Table of contents:

What Is a Masonry Layout?

Masonry Layout vs Grid Layout

Masonry Layout Examples and Use Cases

Best jQuery Masonry Layout Plugins

Best Vanilla JavaScript Masonry Layouts

Bonus: Pure CSS Masonry Layouts

How to Choose

FAQ

Related Resources

You Might Also Like

Add Your Review