# masonry-layout

> Cascading grid layout library

Latest version **4.2.2** (published 2018-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install masonry-layout
pnpm add masonry-layout
yarn add masonry-layout
bun add masonry-layout
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.2.2 |
| Published | 2018-07-04 |
| First published | 2014-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/masonry-layout) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 95.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16699 |
| Author | David DeSandro |
| Maintainers | desandro |
| Keywords | DOM, browser, grid, layout, outlayer |

## Links

- npm: https://www.npmjs.com/package/masonry-layout
- Repository: https://github.com/desandro/masonry
- Homepage: https://masonry.desandro.com
- Issues: https://github.com/desandro/masonry/issues
- npm.io page: https://npm.io/package/masonry-layout

## Dependencies (2)

- [get-size](https://npm.io/package/get-size.md) ^2.0.2
- [outlayer](https://npm.io/package/outlayer.md) ^2.1.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 4.2.2 (latest) — 2018-07-04
- 4.2.1 — 2017-12-30
- 4.2.0 — 2017-04-20
- 4.1.1 — 2016-08-16
- 4.1.0 — 2016-04-27
- 4.0.0 — 2016-01-14
- 3.3.2 — 2015-08-21
- 3.3.1 — 2015-07-02
- 3.3.0 — 2015-04-08
- 3.2.3 — 2015-04-01
- 3.2.2 — 2015-02-19
- 3.2.1 — 2014-11-21
- 3.2.0 — 2014-11-21

## README

# 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

### 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

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

``` html
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
```

### Package managers

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

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

## 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

With jQuery

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

With vanilla JavaScript

``` js
// 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.

``` html
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
```

## License

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

* * *

Made by David DeSandro

---
_Source: https://npm.io/package/masonry-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._