# packery

> Gapless, draggable grid layouts

Latest version **3.0.0** (published 2025-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install packery
pnpm add packery
yarn add packery
bun add packery
```

## Health

**Score 33/100 (F)** — status: maintenance-mode.

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

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-03-08 |
| First published | 2014-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/packery) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 254.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Metafizzy |
| Maintainers | desandro |
| Keywords | DOM, browser, layout, bin, binpacking, packing, masonry, gapless, draggable |

## Links

- npm: https://www.npmjs.com/package/packery
- Repository: https://github.com/metafizzy/packery
- Homepage: https://packery.metafizzy.co
- Issues: https://github.com/metafizzy/packery/issues
- npm.io page: https://npm.io/package/packery

## Dependencies (2)

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

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2025-03-08
- 2.1.2 — 2018-06-29
- 2.1.1 — 2016-06-13
- 2.1.0 — 2016-04-27
- 2.0.0 — 2016-02-16
- 2.0.0-beta1 — 2016-01-27
- 1.4.3 — 2015-08-21
- 1.4.2 — 2015-07-02
- 1.4.1 — 2015-04-10
- 1.4.0 — 2015-04-09
- 1.3.2 — 2015-01-08
- 1.3.0 — 2014-11-22
- 1.2.4 — 2014-10-20

## README

# Packery

_Bin-packing layout library_

See [packery.metafizzy.co](https://packery.metafizzy.co) for complete docs and demos

## Install

### Download

+ [packery.pkgd.js](https://unpkg.com/packery@3/dist/packery.pkgd.js) un-minified, or
+ [packery.pkgd.min.js](https://unpkg.com/packery@3/dist/packery.pkgd.min.js) minified

### CDN

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

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

### Package managers

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

Bower: `bower install packery --save`

## License

Packery v3 is licensed under the MIT license.

## Initialize

With jQuery

``` js
$('.grid').packery({
  // options...
  itemSelector: '.grid-item'
});
```

With vanilla JavaScript

``` js
// vanilla JS
var grid = document.querySelector('.grid');
// initialize with element
var pckry = new Packery( grid, {
  // options...
  itemSelector: '.grid-item'
});

// initialize with selector string
var pckry = new Packery('.grid', {
  // options...
});
```

With HTML

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

``` html
<div class="grid" data-packery='{ "itemSelector": ".grid-item" }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
```

---

By [Metafizzy](http://metafizzy.co)

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