What is Packery?

Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.

Try it out!

Draggable Masonry layout

Drag me!

Draggable dashboard

Drag me!

Install

Download

CDN

Link directly to Packery files on unpkg.

<script src="https://unpkg.com/packery@2.1/dist/packery.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/packery@2.1/dist/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

Include the Packery .js file in your site.

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

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

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

All sizing of items is handled by your CSS.

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

Initialize with jQuery

You can use Packery as a jQuery plugin: $('selector').packery().

$('.grid').packery({
  // options
  itemSelector: '.grid-item',
  gutter: 10
});

Initialize with Vanilla JavaScript

You can use Packery with vanilla JS: new Packery( elem, options ). The Packery() constructor accepts two arguments: the container element and an options object.

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

// element argument can be a selector string
//   for an individual element
var pckry = new Packery( '.grid', {
  // options
});

Initialize in HTML

You can initialize Packery in HTML, without writing any JavaScript. Add data-packery attribute to the container element. Options can be set in its value.

<div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 10 }'>

Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note the value of data-packery is set with single quotes ', but JSON entities use double-quotes ".

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