desandro/masonry

Analysis updated 2026-06-24

★ 16,705HTMLAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((masonry))
    Inputs
      Container element
      Child items
      Layout options
    Outputs
      Staggered grid layout
      Reflowed positions
    Use Cases
      Image gallery
      Pinterest style feed
      Card based dashboard
    Tech Stack
      JavaScript
      jQuery optional
      HTML data attributes
    Install
      CDN
      npm
      Direct download

mindmap root((masonry)) Inputs Container element Child items Layout options Outputs Staggered grid layout Reflowed positions Use Cases Image gallery Pinterest style feed Card based dashboard Tech Stack JavaScript jQuery optional HTML data attributes Install CDN npm Direct download

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Build a Pinterest-style image gallery with varying card heights

USE CASE 2

Lay out blog post previews in a staggered grid on a landing page

USE CASE 3

Add a no-JavaScript grid to an HTML page using only data attributes

USE CASE 4

Replace a CSS grid that leaves awkward gaps between uneven cards

What is it built with?

JavaScriptHTMLCSS

How does it compare?

	desandro/masonry	trycua/cua	emilwallner/screenshot-to-code
Stars	16,705	16,526	16,482
Language	HTML	HTML	HTML
Setup difficulty	easy	hard	hard
Complexity	2/5	4/5	4/5
Audience	developer	researcher	researcher

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

MIT license lets you use, modify, and ship this in any personal or commercial project as long as you keep the copyright notice.

In plain English

Masonry is a JavaScript library that arranges items on a webpage in a cascading grid layout. Instead of lining things up in rigid rows, it places each item in the next available vertical slot, fitting them together like stones in a wall. This is the style you've probably seen on image gallery websites and social feeds where cards of different heights stack neatly without leaving awkward empty spaces. You can add Masonry to a project in a few ways: download the file directly, link to it from a CDN, or install it via npm. Once included, you point it at a container element on your page and it automatically rearranges the child items inside it into the staggered grid pattern. It works with plain JavaScript or with jQuery, and can also be activated purely through an HTML attribute if you prefer not to write any JavaScript at all. It's a focused, single-purpose library that has been maintained for many years and has no major dependencies. The library is released under the MIT license, meaning it's free to use in personal and commercial projects.

Copy-paste prompts

Prompt 1

Show me a minimal HTML page that uses Masonry from a CDN to lay out 12 image cards

Prompt 2

Configure Masonry to reflow when images finish loading using imagesLoaded

Prompt 3

Compare Masonry vs CSS grid columns and tell me when to pick which one

Prompt 4

Help me integrate Masonry into a React component without using jQuery

Prompt 5

Set up Masonry with the HTML data-attribute initializer so I write zero JavaScript

Frequently asked questions

What is masonry?

A JavaScript library that arranges page elements into a cascading grid, fitting items of different heights together like stones in a wall.

What language is masonry written in?

Mainly HTML. The stack also includes JavaScript, HTML, CSS.

What license does masonry use?

MIT license lets you use, modify, and ship this in any personal or commercial project as long as you keep the copyright notice.

How hard is masonry to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is masonry for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub desandro on gitmyhub

Verify against the repo before relying on details.