Packery

The bin-packing layout library

Packery makes your crazy & clever layout a real thing. Be clever. Get crazy.

Masonry,

meticulous,

basically

ridiculous.

What is Packery?

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Install

Download

CDN

Link directly to Packery files on cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.2/packery.pkgd.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.2/packery.pkgd.min.js"></script>

Package managers

Install with Bower: bower install packery --save

Install with npm: npm install packery

License

Commercial license

If you want to use Packery to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Packery commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Packery in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Packery under the terms of the GPLv3. Read more about Packery open source licensing.

Getting started

HTML

Packery works on a container element with a group of similar child items.

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

Include the Packery script in your site.

<script src="/path/to/packery.pkgd.min.js"></script>

CSS

All sizing of items is handled by your CSS.

.item { width: 25%; }
.item.w2 { width: 50%; }

Initialize with JavaScript

Initialize a Packery instance as a jQuery plugin: $('#container').packery().

var $container = $('#container');
// init
$container.packery({
  itemSelector: '.item',
  gutter: 10
});

Initialize a Packery instance with new Packery( element, options ). The Packery constructor accepts two arguments: the container element and an options object.

var container = document.querySelector('#container');
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10
});

Initialize in HTML

You can initialize Packery in HTML, without writing any JavaScript. Simply add js-packery to the class of the container element. Options can be set with a data-packery-options attribute.

<div id="container" class="js-packery"
  data-packery-options='{ "itemSelector": ".item", "gutter": 10 }'>

Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes ".

That’s it! Now let’s do some fun stuff with options and methods.

Vanilla JavaScript

jQuery is not required to use Packery. Given its popularity, jQuery will be used for all example code in these docs. But you can still use Packery with vanilla JS.

Initialize a Packery instance with new Packery( element, options ). The Packery constructor accepts two arguments: the container element and an options object.

var container = document.querySelector('#container');
// init
var pckry = new Packery( container, {
  // options
  itemSelector: '.item',
  gutter: 10
});

The element can be a selector string for a single element.

var pckry = new Packery( '#container', {
  // options
});

Packery in use

Are you using Packery? Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

Twitter updates from @metafizzyco