PHPackages                             desandro/masonry - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. desandro/masonry

ActiveComponent[Utility & Helpers](/categories/utility)

desandro/masonry
================

Cascading grid layout library

v4.2.2(7y ago)16.7k424.4k↓20.9%2.1k[55 issues](https://github.com/desandro/masonry/issues)[5 PRs](https://github.com/desandro/masonry/pulls)1MITHTML

Since Apr 27Pushed 1y ago453 watchersCompare

[ Source](https://github.com/desandro/masonry)[ Packagist](https://packagist.org/packages/desandro/masonry)[ Docs](https://masonry.desandro.com)[ RSS](/packages/desandro-masonry/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (6)Used By (1)

Masonry
=======

[](#masonry)

*Cascading grid layout library*

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

See [masonry.desandro.com](https://masonry.desandro.com) for complete docs and demos.

Install
-------

[](#install)

### Download

[](#download)

- [masonry.pkgd.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js) un-minified, or
- [masonry.pkgd.min.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js) minified

### CDN

[](#cdn)

Link directly to Masonry files on [unpkg](https://unpkg.com/).

```

```

### Package managers

[](#package-managers)

[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`

Bower: `bower install masonry-layout --save`

Support Masonry development
---------------------------

[](#support-masonry-development)

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by [purchasing a license for one of Metafizzy's commercial libraries](https://metafizzy.co).

Initialize
----------

[](#initialize)

With jQuery

```
$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});
```

With vanilla JavaScript

```
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

// init with selector
var msnry = new Masonry( '.grid', {
  // options...
});
```

With HTML

Add a `data-masonry` attribute to your element. Options can be set in JSON in the value.

```

  ...

```

License
-------

[](#license)

Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it.

---

Made by David DeSandro

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance26

Infrequent updates — may be unmaintained

Popularity71

Solid adoption and visibility

Community38

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 96.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~199 days

Total

5

Last Release

2875d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d8d4ff123dd1d1a66df8fe808218b846ece7b84256a6f8f35e23c436efbf948f?d=identicon)[desandro](/maintainers/desandro)

---

Top Contributors

[![desandro](https://avatars.githubusercontent.com/u/85566?v=4)](https://github.com/desandro "desandro (432 commits)")[![kovshenin](https://avatars.githubusercontent.com/u/108344?v=4)](https://github.com/kovshenin "kovshenin (5 commits)")[![killua99](https://avatars.githubusercontent.com/u/457822?v=4)](https://github.com/killua99 "killua99 (4 commits)")[![tramck](https://avatars.githubusercontent.com/u/1715486?v=4)](https://github.com/tramck "tramck (3 commits)")[![nfriedly](https://avatars.githubusercontent.com/u/114976?v=4)](https://github.com/nfriedly "nfriedly (2 commits)")[![kant](https://avatars.githubusercontent.com/u/32717?v=4)](https://github.com/kant "kant (1 commits)")[![GianlucaGuarini](https://avatars.githubusercontent.com/u/879612?v=4)](https://github.com/GianlucaGuarini "GianlucaGuarini (1 commits)")[![tdreyno](https://avatars.githubusercontent.com/u/233?v=4)](https://github.com/tdreyno "tdreyno (1 commits)")

---

Tags

browserjavascriptlibrarydomgridlayoutoutlayer

### Embed Badge

![Health badge](/badges/desandro-masonry/health.svg)

```
[![Health](https://phpackages.com/badges/desandro-masonry/health.svg)](https://phpackages.com/packages/desandro-masonry)
```

###  Alternatives

[desandro/imagesloaded

JavaScript is all like \_You images done yet or what?\_

8.9k439.0k1](/packages/desandro-imagesloaded)[codenco-dev/nova-grid-system

A Laravel Nova tool to have a grid system

80300.1k](/packages/codenco-dev-nova-grid-system)[fedemotta/yii2-widget-datatables

DataTables widget for Yii2

34179.4k1](/packages/fedemotta-yii2-widget-datatables)[netzmacht/php-leaflet

PHP leaflet definition and javascript generator

1927.2k2](/packages/netzmacht-php-leaflet)[outl1ne/nova-grid

A Laravel Nova tool that allows placing fields in a grid using ->size() helpers.

1017.6k](/packages/outl1ne-nova-grid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)