• Install
• Download
• CDN
• Package managers
• License
• Getting started
• HTML
• CSS
• Initialize with jQuery
• Initialize with Vanilla JavaScript
• Initialize in HTML
• Packery in use

Install

Download

• packery.pkgd.js un-minified, or
• packery.pkgd.min.js minified

CDN

Link directly to Packery files on unpkg.

<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

Install with npm: npm install packery

Install with Bower: bower install packery --save

License

Packery v3 is licensed under the MIT License.

Whereas earlier versions of Packery were previously dual licensed for commercial license, Packery v3 licensing no longer has this distinction. You are free to use Packery v3 in commercial and closed-source applications.

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 }'>

Packery in use

Niice

Stutterheim Raincoats

The Tonight Show with Jimmy Fallon

The Best of East London

Square Enix - Deus Ex

Creative Journal

Syfy

Oras faucets

STUDIO AKA

Lookwork

UNC Admissions

Woodshop