packery

The packery layout mode uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.”

Packery is available as a stand-alone layout library. See also: What is the difference between Isotope, Masonry, and Packery?

Install

This layout mode is not included in isotope.pkgd.js and must be installed separately.

Download a packaged source file for packery layout mode:

• packery-mode.pkgd.js
• packery-mode.pkgd.min.js

Install with Bower:

bower install isotope-packery

Install with npm:

npm install isotope-packery

Stamp

Packery layout can stamp items in place. Packery will layout item elements around stamped elements — even above, unlike Masonry.

layoutMode: 'packery',
itemSelector: '.mini-item',
stamp: '.stamp'

Options

columnWidth

Aligns items to the width of a column of a horizontal grid.

Unlike masonry layout, packery layout does not require columnWidth.

layoutMode: 'packery',
packery: {
  columnWidth: 60
}

If set to an Element or Selector String, Isotope will use the width of that element. See Element sizing. Setting columnWidth with element sizing is recommended if you are using percentage widths.

<div class="flex-5-col">
  <div class="grid-sizer"></div>
  <div class="mini-item"></div>
  <div class="mini-item"></div>
  ...
</div>

.flex-5-col .grid-sizer,
.flex-5-col .mini-item { width: 20%; }
.flex-5-col .mini-item.w2 { width: 40%; }

layoutMode: 'packery',
packery: {
  columnWidth: '.grid-sizer'
},
itemSelector: '.mini-item'

gutter

The space between item elements, both vertically and horizontally.

packery: {
  gutter: 10
}

.packery-gutter .mini-item.w2 {
  width: 110px;
}
.packery-gutter .mini-item.h2 {
  height: 110px;
}

If set to an Element or Selector String, Isotope will use the width of that element. See Element sizing.

<div class="flex-4-col-gutter">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="mini-item"></div>
  <div class="mini-item"></div>
  ...
</div>

.flex-4-col-gutter .grid-sizer,
.flex-4-col-gutter .mini-item { width: 22%; }
.flex-4-col-gutter .mini-item.w2 { width: 48%; }
.flex-4-col-gutter .gutter-sizer { width: 4%; }

layoutMode: 'packery',
packery: {
  gutter: '.gutter-sizer'
},
itemSelector: '.mini-item'

isHorizontal

Arranges items horizontally instead of vertically.

Set a container height for horizontal layouts.

layoutMode: 'packery',
packery: {
  isHorizontal: true
}

rowHeight

Aligns items to the height of a row of a vertical grid.

layoutMode: 'packery',
packery: {
  rowHeight: 60
}

If set to an Element or Selector String, Isotope will use the height of that element. See Element sizing. Setting rowHeight with element sizing is recommended if you are using media queries.