The bin-packing layout library

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





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.


A packaged source file includes everything you need to use Packery.


If you are familiar with the command line and build processes, Packery can be installed with Bower. Packery is built on dependencies. Bower takes care of these.

bower install packery

Commercial licensing

Packery may be used in commercial projects and applications with the one-time purchase of a commercial license. Read more about Packery commercial licensing.

Buy Developer License $25 Buy Organization License $90

Purchasing accepts most credit cards and takes seconds. Once purchased, you’ll receive a commercial license PDF and you will be all set to use Packery in your commercial applications.

For non-commercial, personal, or open source projects and applications, you may use Packery under the terms of the GPL v3 License. You may use Packery for free.

Purchase with PayPal

Getting started


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>

Include the Packery script in your site.

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


All sizing of items is handled by your CSS.

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

Initialize with JavaScript

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.


jQuery is not required to use Packery. But if you do enjoy jQuery, Packery works with it as a jQuery plugin.

var $container = $('#container');
// initialize
  itemSelector: '.item',
  gutter: 10

Get the Packery instance with .data('packery').

var pckry = $'packery');