PHPackages                             heimrichhannot/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. heimrichhannot/masonry

Abandoned → [heimrichhannot-contao-components/masonry](/?search=heimrichhannot-contao-components%2Fmasonry)Component

heimrichhannot/masonry
======================

Cascading grid layout library

4.1.1(8y ago)023MITHTML

Since Jun 20Pushed 8y ago5 watchersCompare

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

READMEChangelogDependenciesVersions (2)Used By (0)

Masonry
=======

[](#masonry)

> Abandoned! See [heimrichhannot-contao-components/masonry](https://github.com/heimrichhannot-contao-components/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](http://masonry.desandro.com) for complete docs and demos.

Install
-------

[](#install)

### Download

[](#download)

- [masonry.pkgd.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.js) un-minified, or
- [masonry.pkgd.min.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.min.js) minified

### CDN

[](#cdn)

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

```

```

### Package managers

[](#package-managers)

Bower: `bower install masonry --save`

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

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

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

3251d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (1 commits)")

---

Tags

browserjavascriptlibrarydomgridlayoutoutlayer

### Embed Badge

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

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

###  Alternatives

[desandro/masonry

Cascading grid layout library

16.7k424.4k1](/packages/desandro-masonry)[desandro/imagesloaded

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

8.9k439.0k1](/packages/desandro-imagesloaded)[behat/mink-selenium2-driver

Selenium2 (WebDriver) driver for Mink framework

51159.1M666](/packages/behat-mink-selenium2-driver)[jcalderonzumba/mink-phantomjs-driver

PhantomJS driver for Mink framework

15910.9M63](/packages/jcalderonzumba-mink-phantomjs-driver)[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)

PHPackages © 2026

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