Packery

https://packery.metafizzy.co/
Admin
Packery is a JavaScript library and jQuery plugin for creating gapless and draggable grid layouts...
Tokens:11,236
Snippets:80
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Packery with Webpack

Source: https://packery.metafizzy.co/extras

Explains how to use Packery with Webpack for bundling modules. It covers installation, requiring the library, and integrating it as a jQuery plugin using jQuery Bridget, similar to the Browserify setup.

```bash
npm install packery
```

```javascript
// main.js
var Packery = require('packery');

var pckry = new Packery( '.grid', {
  // options...
});
```

```bash
webpack main.js bundle.js
```

```bash
npm install jquery-bridget
```

```javascript
var $ = require('jquery');
var jQBridget = require('jquery-bridget');
var Packery = require('packery');
$.bridget( 'packery', Packery, $ );
$('.grid').packery({
  columnWidth: 80
});
```

--------------------------------

### Packery with RequireJS

Source: https://packery.metafizzy.co/extras

Demonstrates how to use Packery with RequireJS, both as a standalone library and as a jQuery plugin using jQuery Bridget. It includes examples of setting up base URLs and path configurations for managing dependencies.

```javascript
requirejs( [
  'path/to/packery.pkgd.js',
], function( Packery ) {
  new Packery( '.grid', {...});
});
```

```javascript
requirejs( [ 'require', 'jquery', 'path/to/packery.pkgd.js' ],
  function( require, $, Packery ) {
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
      jQueryBridget( 'packery', Packery, $ );
      $('.grid').packery({...});
    }
  );
});
```

```javascript
requirejs.config({
  baseUrl: 'bower_components/',
  paths: {
    app: '../'
  }
});

requirejs( [
  'packery/js/packery',
  'app/my-component.js'
], function( Packery, myComp ) {
  new Packery( '.grid', {...});
});
```

```javascript
requirejs.config({
  baseUrl: '../bower_components',
  paths: {
    jquery: 'jquery/dist/jquery'
  }
});

requirejs( [
    'jquery',
    'packery/js/packery',
    'jquery-bridget/jquery-bridget'
  ],
  function( $, Packery, jQueryBridget ) {
    jQueryBridget( 'packery', Packery, $ );
    $('.grid').packery({...});
});
```

--------------------------------

### Fit Item on Click Event (jQuery)

Source: https://packery.metafizzy.co/methods

Example of using the `fit` method when an item is clicked and toggles its size, fitting it into the layout.

```jquery
$grid.on( 'click', '.grid-item', function( event ) {
  var $item = $( event.currentTarget );
  // change size of item by toggling large class
  $item.toggleClass('grid-item--large');
  if ( $item.is('.grid-item--large') ) {
    // fit large item
    $grid.packery( 'fit', event.currentTarget );
  } else {
    // back to small, shiftLayout back
    $grid.packery('shiftLayout');
  }
});
```

--------------------------------

### Shift Layout on Click Event (jQuery)

Source: https://packery.metafizzy.co/methods

Example of using `shiftLayout` when an item is clicked and toggles its size class.

```jquery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $( event.currentTarget ).toggleClass('grid-item--large');
  // trigger shiftLayout after item size changes
  $grid.packery('shiftLayout');
});
```

--------------------------------

### Toggle Stamp Button Example (jQuery)

Source: https://packery.metafizzy.co/methods

Example of implementing a button to toggle the stamped status of an element and re-triggering the layout.

```jquery
var $grid = $('.grid').packery({
  // specify itemSelector so stamps do do not get laid out
  itemSelector: '.grid-item'
});
var $stamp = $grid.find('.stamp');
var isStamped = false;

$('.toggle-stamp-button').on( 'click', function() {
  // stamp or unstamp element
  if ( isStamped ) {
    $grid.packery( 'unstamp', $stamp );
  } else {
    $grid.packery( 'stamp', $stamp );
  }
  // trigger layout
  $grid.packery('layout');
  // set flag
  isStamped = !isStamped;
});
```

--------------------------------

### Packery with Browserify

Source: https://packery.metafizzy.co/extras

Shows how to integrate Packery with Browserify, including installation via npm and usage both as a standalone library and as a jQuery plugin with jQuery Bridget. This facilitates module management in Node.js environments.

```bash
npm install packery
```

```javascript
var Packery = require('packery');

var pckry = new Packery( '.grid', {
  // options...
});
```

```bash
npm install jquery
npm install jquery-bridget
```

```javascript
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Packery = require('packery');
jQueryBridget( 'packery', Packery, $ );
$('.grid').packery({
  columnWidth: 80
});
```

--------------------------------

### Layout on Click Event (jQuery)

Source: https://packery.metafizzy.co/methods

Example of re-triggering the Packery layout when an item is clicked and toggles a size class.

```jquery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});
```

--------------------------------

### Get Packery item elements

Source: https://packery.metafizzy.co/methods

Returns an array of all item elements currently managed by the Packery instance.

```jQuery
var elems = $grid.packery('getItemElements')
```

```vanilla JS
var elems = pckry.getItemElements()
```

--------------------------------

### Packery layoutComplete Event

Source: https://packery.metafizzy.co/events

Example of handling the 'layoutComplete' event in Packery, which is triggered after layout and positioning transitions. It provides details on the 'laidOutItems' argument.

```javascript
// jQuery
$grid.on( 'layoutComplete', function( event, laidOutItems ) {...} )
// vanilla JS
msnry.on( 'layoutComplete', function( laidOutItems ) {...} )

$grid.on( 'layoutComplete',
  function( event, laidOutItems ) {
    console.log( 'Packery layout completed on ' + 
      laidOutItems.length + ' items' );
  }
);

```

--------------------------------

### Stamp and Unstamp Elements (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Shows how to use `stamp` and `unstamp` methods to exclude elements from the Packery layout, making other items fit around them. Includes example of toggling.

```jquery
$grid.packery( 'stamp', elements )
```

```vanilla-javascript
pckry.stamp( elements )
```

--------------------------------

### jQuery Event Binding with Packery

Source: https://packery.metafizzy.co/events

Demonstrates how to bind, unbind, and bind once to Packery events using jQuery's .on(), .off(), and .one() methods. Includes examples of accessing event arguments.

```javascript
// jQuery
var $grid = $('.grid').packery({...});

function onLayout() {
  console.log('layout done');
}
// bind event listener
$grid.on( 'layoutComplete', onLayout );
// un-bind event listener
$grid.off( 'layoutComplete', onLayout );
// bind event listener to be triggered just once. note ONE not ON
$grid.one( 'layoutComplete', function() {
  console.log('layout done, just this one time');
});

// jQuery, has event argument
$grid.on( 'layoutComplete', function( event, items ) {
  console.log( items.length );
});

```

--------------------------------

### Get Packery instance by element or selector

Source: https://packery.metafizzy.co/methods

Retrieves the Packery instance associated with a DOM element or a selector string. Useful for accessing Packery instances initialized in HTML.

```vanilla JS (Element)
var grid = document.querySelector('.grid')
var pckry = Packery.data( grid )
```

```vanilla JS (Selector)
var pckry = Packery.data('.grid')
```

```jQuery (Element)
// pass in the element, $element[0], not the jQuery object
var pckry = Packery.data( $('.grid')[0] )
```

--------------------------------

### Get Packery instance from jQuery object

Source: https://packery.metafizzy.co/methods

Retrieves the Packery instance associated with a jQuery object, allowing access to Packery properties like filteredItems.

```jQuery
var pckry = $('.grid').data('packery')
// access Packery properties
console.log( pckry.filteredItems.length + ' filtered items'  )
```

--------------------------------

### Packery removeComplete Event

Source: https://packery.metafizzy.co/events

Provides an example for the 'removeComplete' event in Packery, triggered after an item element has been removed. It explains the 'removedItems' argument.

```javascript
// jQuery
$grid.on( 'removeComplete', function( event, removedItems ) {...} )
// vanilla JS
msnry.on( 'removeComplete', function( removedItems ) {...} )

$grid.on( 'removeComplete',
  function( event, removedItems ) {
    notify( 'Removed ' + removedItems.length + ' items' );
  }
);

```

--------------------------------

### Get Item Order After Layout or Drag

Source: https://packery.metafizzy.co/draggable

Retrieves the current order of item elements within the Packery layout using `getItemElements`. This function is useful for updating the displayed order of items after a layout completes or after an item has been positioned post-drag.

```javascript
// show item order after layout
function orderItems() {
  var itemElems = $grid.packery('getItemElements');
  $( itemElems ).each( function( i, itemElem ) {
    $( itemElem ).text( i + 1 );
  });
}

$grid.on( 'layoutComplete', orderItems );
$grid.on( 'dragItemPositioned', orderItems );
```

--------------------------------

### Initialize Packery with Options (jQuery, Vanilla JS, HTML)

Source: https://packery.metafizzy.co/options

Demonstrates initializing Packery with common options using jQuery, vanilla JavaScript, and HTML data attributes. The 'itemSelector' specifies the grid items, and 'gutter' adds spacing.

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

```javascript
// vanilla JS
var pckry = new Packery( '.grid', {
  itemSelector: '.grid-item',
  gutter: 10
});
```

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

</div>
```

--------------------------------

### Initialize Packery and Append Items (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Demonstrates how to initialize Packery with jQuery and vanilla JavaScript, append new elements, and trigger a layout. Shows basic chaining with jQuery.

```jquery
$grid.packery()
  .append( elem )
  .packery( 'appended', elem )
  // layout
  .packery();
```

```vanilla-javascript
// vanilla JS
var pckry = new Packery( '.grid', {...});
gridElement.appendChild( elem );
pckry.appended( elem );
pckry.layout();
```

--------------------------------

### Initialize Packery with Vanilla JavaScript

Source: https://packery.metafizzy.co/index

Shows how to initialize Packery using vanilla JavaScript by creating a new Packery instance with the container element and an options object. The container can be a DOM element or a selector string.

```javascript
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 Packery with jQuery

Source: https://packery.metafizzy.co/index

Demonstrates how to initialize Packery as a jQuery plugin by selecting a container element and passing configuration options such as itemSelector and gutter.

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

--------------------------------

### Initializing Packery After All Images Have Loaded

Source: https://packery.metafizzy.co/layout

Shows how to initialize Packery only after all images within the grid have finished loading. This is achieved by using the `imagesLoaded` plugin before initializing Packery.

```javascript
var $grid = $('.grid').imagesLoaded( function() {
  // init Packery after all images have loaded
  $grid.packery({
    // options...
  });
});
```

--------------------------------

### Layout Specified Items (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Shows how to use `layoutItems` to lay out specific items within the Packery instance, with an option for instant layout.

```jquery
$grid.packery( 'layoutItems', items, isInstant )
```

```vanilla-javascript
pckry.layoutItems( items, isInstant )
```

--------------------------------

### Responsive columnWidth with Media Queries (CSS)

Source: https://packery.metafizzy.co/options

Demonstrates how to use CSS media queries with a '.grid-sizer' element to create responsive column widths for Packery layouts.

```css
/* 3 columns by default */
.grid-sizer { width: 33.333%; }

@media screen and (min-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer { width: 20%; }
}
```

--------------------------------

### Initializing Packery After Each Image Loads

Source: https://packery.metafizzy.co/layout

Explains how to initialize Packery and then trigger a layout update after each image within the grid has loaded. This uses the `imagesLoaded` plugin to ensure proper item positioning.

```javascript
// init Packery
var $grid = $('.grid').packery({
  // options...
});
// layout Packery after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.packery();
});
```

--------------------------------

### Packery with Bootstrap 3 Grid (3 Columns)

Source: https://packery.metafizzy.co/extras

Demonstrates using Packery with Bootstrap's v3 grid system to create a fluid 3-column layout. It shows the necessary HTML structure and the Packery initialization options, including `columnWidth` and `percentPosition`.

```html
<div class="container-fluid">
  <!-- add extra container element for Packery -->
  <div class="grid">
    <!-- add sizing element for columnWidth -->
    <div class="grid-sizer col-xs-4"></div>
    <!-- items use Bootstrap .col- classes -->
    <div class="grid-item col-xs-8">
      <!-- wrap item content in its own element -->
      <div class="grid-item-content">...</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">...</div>
    </div>
    ...
  </div>
</div>
```

```javascript
$('.grid').packery({
  // use a separate class for itemSelector, other than .col-
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
```

--------------------------------

### Packery with Bootstrap 3 Grid (Responsive Columns)

Source: https://packery.metafizzy.co/extras

Illustrates how to create a responsive grid layout with Packery and Bootstrap v3, using multiple `.col-` classes on items. This allows column sizes to adjust across different screen sizes (xs, sm, md).

```html
<div class="container-fluid">
  <div class="grid">
    <!-- 2 col grid @ xs, 3 col grid @ sm, 4 col grid @ md -->
    <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
    <!-- 1 col @ xs, 2 col @ sm, 2 col @ md -->
    <div class="grid-item col-xs-6 col-sm-8 col-md-6">
      <div class="grid-item-content">...</div>
    </div>
    <!-- 1 col @ xs, 1 col @ sm, 1 col @ md -->
    <div class="grid-item col-xs-6 col-sm-4 col-md-3">
      <div class="grid-item-content">...</div>
    </div>
    ...
  </div>
</div>
```

--------------------------------

### Include Packery via CDN

Source: https://packery.metafizzy.co/index

Links to the Packery library hosted on unpkg, providing access to both the un-minified and minified versions for direct use in web projects.

```html
<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>
```

--------------------------------

### Responsive Packery Layout with Percentage Sizing

Source: https://packery.metafizzy.co/layout

Demonstrates how to configure Packery for responsive layouts using percentage-based widths for grid items. Setting `percentPosition: true` ensures items are positioned using percentages.

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

```css
/* fluid 5 columns */
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
```

```javascript
$('.grid').packery({
  percentPosition: true
})
```

--------------------------------

### Initialize Packery in HTML

Source: https://packery.metafizzy.co/index

Illustrates initializing Packery directly within HTML by adding the `data-packery` attribute to the container element. Options are passed as a JSON string within the attribute value.

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

```

--------------------------------

### Element Sizing with Packery Options (HTML, CSS, jQuery)

Source: https://packery.metafizzy.co/options

Demonstrates using elements for sizing with 'columnWidth', 'rowHeight', and 'gutter'. This approach is beneficial for responsive layouts controlled via CSS.

```html
<div class="grid">
  <!-- .grid-sizer & .gutter-sizer empty elements
    only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
```

```css
/* fluid 4 columns, 4% gutter */
.grid-sizer,
.grid-item { width: 22%; }

.gutter-sizer { width: 4%; }

/* 2 columns wide */
.grid-item--width2 { width: 40%; }
```

```javascript
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
// do not use .grid-sizer in layout
itemSelector: '.grid-item',
percentPosition: true
```

--------------------------------

### JavaScript for Packery Layout with Typekit Font Events

Source: https://packery.metafizzy.co/extras

This JavaScript code demonstrates how to initialize Packery and trigger its layout method after web fonts have loaded using Typekit's events. It includes a helper function to ensure Packery is initialized before attempting to lay it out.

```javascript
var pckry;

function triggerPackery() {
  // don't proceed if packery has not been initialized
  if ( !pckry ) {
    return;
  }
  pckry.layout();
}
// initialize packery on document ready
docReady( function() {
  var container = document.querySelector('.grid');
  pckry = new Packery( container, {
    // options...
  });
});
// trigger packery when fonts have loaded
Typekit.load({
  active: triggerPackery,
  inactive: triggerPackery
});


```

--------------------------------

### Trigger Layout (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Shows how to trigger a full layout of all items using both jQuery and vanilla JavaScript. Useful after an item's size changes.

```jquery
$grid.packery()
```

```vanilla-javascript
pckry.layout()
```

--------------------------------

### Initialize Packery and Make Items Draggable with Draggabilly

Source: https://packery.metafizzy.co/draggable

Initializes a Packery grid and makes each grid item draggable using Draggabilly. It then binds the drag events from each Draggabilly instance to the Packery instance to enable drag-and-drop functionality within the layout.

```javascript
// initialize Packery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  // columnWidth helps with drop positioning
  columnWidth: 100
});

// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
  var draggie = new Draggabilly( gridItem );
  // bind drag events to Packery
  $grid.packery( 'bindDraggabillyEvents', draggie );
});
```

--------------------------------

### Layout API

Source: https://packery.metafizzy.co/methods

Methods for laying out and re-arranging items in the Packery grid.

```APIDOC
## GET /layout

### Description
Lays out all item elements. Useful when an item has changed size and all items need to be laid out again.

### Method
GET

### Endpoint
/layout

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```
// jQuery
$grid.packery()
// vanilla JS
pckry.layout()
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

```APIDOC
## GET /shiftLayout

### Description
Shifts all item positions, maintaining their horizontal position. This method is useful for updating the layout after an item's size has changed, providing a more ordered rearrangement than a full layout.

### Method
GET

### Endpoint
/shiftLayout

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```
// jQuery
$grid.packery('shiftLayout')
// vanilla JS
pckry.shiftLayout()
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

```APIDOC
## GET /layoutItems

### Description
Lays out specified items within the Packery grid.

### Method
GET

### Endpoint
/layoutItems

### Parameters
#### Query Parameters
- **isInstant** (Boolean) - Optional - Disables transitions for the layout.

#### Request Body
- **items** (Array of Packery.Item) - Required - The items to lay out.

### Request Example
```
// jQuery
$grid.packery( 'layoutItems', items, isInstant )
// vanilla JS
pckry.layoutItems( items, isInstant )
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

```APIDOC
## GET /fit

### Description
Fits an item element within the layout and shifts other item elements around it. This is useful for expanding an element while keeping it in its same position.

### Method
GET

### Endpoint
/fit

### Parameters
#### Path Parameters
- **element** (Element) - Required - The element to fit.
- **x** (Number) - Optional - The horizontal position to fit the element.
- **y** (Number) - Optional - The vertical position to fit the element.

### Request Example
```
// jQuery
$container.packery( 'fit', element, x, y )
// vanilla JS
pckry.fit( element, x, y )
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

```APIDOC
## GET /stamp

### Description
Stamps elements in the layout. Packery will lay out item elements around the stamped elements.

### Method
GET

### Endpoint
/stamp

### Parameters
#### Path Parameters
- **elements** (Element, jQuery Object, NodeList, or Array of Elements) - Required - The elements to stamp.

### Request Example
```
// jQuery
$grid.packery( 'stamp', elements )
// vanilla JS
pckry.stamp( elements )
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

```APIDOC
## GET /unstamp

### Description
Un-stamps elements in the layout, allowing Packery to lay out item elements around them again.

### Method
GET

### Endpoint
/unstamp

### Parameters
#### Path Parameters
- **elements** (Element, jQuery Object, NodeList, or Array of Elements) - Required - The elements to unstamp.

### Request Example
```
// jQuery
$grid.packery( 'unstamp', elements )
// vanilla JS
pckry.unstamp( elements )
```

### Response
#### Success Response (200)
- **None**: This method modifies the layout in place.

#### Response Example
None
```

--------------------------------

### jQuery JavaScript for Packery Layout with Typekit Font Events

Source: https://packery.metafizzy.co/extras

An alternative JavaScript implementation using jQuery to initialize Packery and trigger its layout method in conjunction with Typekit font loading events. It ensures the Packery instance is ready before calling layout.

```javascript
// or with jQuery
var $grid;

function triggerPackery() {
  // don't proceed if $grid has not been selected
  if ( !$grid ) {
    return;
  }
  // init Packery
  $grid.packery({
    // options...
  });
}
// trigger packery on document ready
$(function(){
  $grid = $('.grid');
  triggerPackery();
});
// trigger packery when fonts have loaded
Typekit.load({
  active: triggerPackery,
  inactive: triggerPackery
});


```

--------------------------------

### Shift Layout (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Demonstrates the `shiftLayout` method for repositioning items after a change, maintaining horizontal order. Includes jQuery and vanilla JS usage.

```jquery
$grid.packery('shiftLayout')
```

```vanilla-javascript
pckry.shiftLayout()
```

--------------------------------

### Fit Item within Layout (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Demonstrates the `fit` method to position an item within the layout, shifting others. Allows optional x and y coordinates for precise placement.

```jquery
$container.packery( 'fit', element, x, y )
```

```vanilla-javascript
pckry.fit( element, x, y )
```

--------------------------------

### HTML Structure for Animating Item Size

Source: https://packery.metafizzy.co/extras

Demonstrates the required HTML structure for animating item sizes in Packery. It shows a parent 'grid' element containing 'grid-item' elements, each with a 'grid-item-content' child, which is the element that will be animated.

```html
<div class="grid">
  <!-- items have grid-item-content child elements -->
  <div class="grid-item">
    <div class="grid-item-content"></div>
  </div>
  ...


```

--------------------------------

### CSS for Animating Item Size (Percentage Width)

Source: https://packery.metafizzy.co/extras

Presents CSS for animating item sizes in Packery when items have responsive, percentage-based widths. It styles the grid item and its content, showing how changes in the parent item's width affect the child content.

```css
.grid-item {
  width: 20%;
  height: 60px;
}

.grid-item-content {
  width: 100%;
  height: 100%;
  background: #C09;
  transition: width 0.4s, height 0.4s;
}
/* item has expanded size */
.grid-item.is-expanded {
  width: 60%;
  height: 120px;
}


```

--------------------------------

### CSS for Packery Grid Item Sizing and Styling

Source: https://packery.metafizzy.co/layout

Provides CSS rules for styling and sizing individual grid items. It includes base styles and modifiers for width and height adjustments, crucial for Packery's layout.

```css
.grid-item {
  float: left;
  width: 60px;
  height: 60px;
  background: #e6e5e4;
  border: 2px solid #b6b5b4;
}

.grid-item--width2 { width: 120px; }
.grid-item--height2 { height: 120px; }
```

--------------------------------

### HTML Structure for Packery Grid Items

Source: https://packery.metafizzy.co/layout

Defines the basic HTML structure for items within a Packery grid. Items can have specific classes to control their size, like `grid-item--width2` or `grid-item--height2`.

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

--------------------------------

### Vanilla JS Event Binding with Packery

Source: https://packery.metafizzy.co/events

Illustrates event binding, unbinding, and one-time event triggering in Packery using vanilla JavaScript's .on(), .off(), and .once() methods. Shows how to handle events without an event argument.

```javascript
// vanilla JS
var pckry = new Packery( '.grid', {...});

function onLayout() {
  console.log('layout done');
}
// bind event listener
pckry.on( 'layoutComplete', onLayout );
// un-bind event listener
pckry.off( 'layoutComplete', onLayout );
// bind event listener to be triggered just once
pckry.once( 'layoutComplete', function() {
  console.log('layout done, just this one time');
});

// vanilla JS, no event argument
pckry.on( 'layoutComplete', function( items ) {
  console.log( items.length );
});

```

--------------------------------

### Initialize Packery and Make Items Draggable with jQuery UI

Source: https://packery.metafizzy.co/draggable

Initializes a Packery grid and makes all grid items draggable using jQuery UI's draggable plugin. It then binds these drag events to the Packery instance, allowing for drag-and-drop within the Packery layout.

```javascript
// initialize Packery
var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  // columnWidth helps with drop positioning
  columnWidth: 100
});

// make all items draggable
var $items = $grid.find('.grid-item').draggable();
// bind drag events to Packery
$grid.packery( 'bindUIDraggableEvents', $items );
```

--------------------------------

### Basic HTML Structure for Packery

Source: https://packery.metafizzy.co/index

Defines the necessary HTML structure for Packery, consisting of a container element with the class 'grid' and child items with the class 'grid-item'. Additional classes can specify item dimensions.

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

--------------------------------

### Fit Item at Specific Position (jQuery)

Source: https://packery.metafizzy.co/methods

Illustrates fitting an item to a precise x and y coordinate within the Packery layout upon click.

```jquery
$grid.on( 'click', '.grid-item', function( event ) {
  $grid.packery( 'fit', event.currentTarget, 120, 60 );
});
```

--------------------------------

### Prepend items to Packery layout

Source: https://packery.metafizzy.co/methods

Adds and lays out newly prepended item elements at the beginning of the layout. Accepts a single element, jQuery object, NodeList, or an array of elements.

```jQuery
$grid.packery( 'prepended', elements )
```

```vanilla JS
pckry.prepended( elements )
```

```jQuery Example
$('.prepend-button').on( 'click', function() {
  // create new item elements
  var $items = $('<div class="grid-item">...</div>');
  // prepend items to grid
  $grid.prepend( $items )
    // add and lay out newly prepended items
    .packery( 'prepended', $items );
});
```

--------------------------------

### CSS for Packery Item Sizing

Source: https://packery.metafizzy.co/index

Provides CSS rules to control the width of Packery grid items, allowing for responsive layouts where items can occupy different percentages of the container width.

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

--------------------------------

### Fluid 5-Column Layout CSS (CSS)

Source: https://packery.metafizzy.co/options

This CSS defines a fluid 5-column layout by setting the width of grid items to 20%. This works in conjunction with JavaScript options like `percentPosition` for responsive resizing.

```css
.grid-item { width: 20%; }
```

--------------------------------

### CSS for Animating Item Size (Fixed Width)

Source: https://packery.metafizzy.co/extras

Provides CSS rules for animating the size of child elements within Packery items. It includes styles for the base item and content, and how they change when an 'is-expanded' class is applied. Assumes fixed pixel widths.

```css
/* item is invisible, but used for layout
item-content is visible, and transitions size */
.grid-item,
.grid-item-content {
  width: 60px;
  height: 60px;
}
.grid-item-content {
  background: #C09;
  transition: width 0.4s, height 0.4s;
}

/* both item and item content change size */
.grid-item.is-expanded,
.grid-item.is-expanded .grid-item-content {
  width: 180px;
  height: 120px;
}


```

--------------------------------

### Packery fitComplete Event

Source: https://packery.metafizzy.co/events

Demonstrates handling the 'fitComplete' event in Packery, which triggers after an item element is successfully fitted. It details the 'item' argument.

```javascript
// jQuery
$grid.on( 'fitComplete', function( event, item ) {...} )
// vanilla JS
pckry.on( 'fitComplete', function( item ) {...} )

$grid.on( 'fitComplete',
  function( event, item ) {
    console.log( 'Packery fit', item.element );
  }
);

```

--------------------------------

### Disable Initial Layout and Bind Events (JavaScript)

Source: https://packery.metafizzy.co/options

Setting `initLayout: false` prevents Packery from performing the initial layout upon instantiation. This allows you to bind events or perform other actions before the layout is triggered. The initial layout can then be manually initiated using the Packery instance.

```javascript
var $grid = $('.grid').packery({
  // disable initial layout
  initLayout: false,
  //...
});
// bind event
$grid.packery( 'on', 'layoutComplete', function() {
  console.log('layout is complete');
});
// trigger initial layout
$grid.packery();
```

--------------------------------

### Set Item Positions with Percent Values (JavaScript)

Source: https://packery.metafizzy.co/options

The `percentPosition` option sets item positions using percentage values instead of pixel values. This is particularly useful for items with percentage-based widths, as it prevents position transitions during window resizing.

```javascript
percentPosition: true
```

--------------------------------

### Set columnWidth to Selector String or Element

Source: https://packery.metafizzy.co/options

Shows two methods for setting the 'columnWidth' option: using a CSS selector string to find the first matching element, or directly passing an element object.

```javascript
// set to a selector string
// first matching element within container element will be used
columnWidth: '.grid-sizer'
```

```javascript
// set to an element
columnWidth: $grid.find('.grid-sizer')[0]
```

--------------------------------

### Control Vertical Flow (Bottom-Up) (JavaScript)

Source: https://packery.metafizzy.co/options

The `originTop: false` option controls the vertical flow. By default, items position from top to bottom (`originTop: true`). Setting it to `false` creates a bottom-up layout, resembling Tetris, similar to `isOriginTop` in Packery v1.

```javascript
originTop: false
```

--------------------------------

### Style Draggabilly Drag and Drop

Source: https://packery.metafizzy.co/draggable

Provides CSS to visually indicate when an item is being dragged or is transitioning to its post-drag position. It uses the '.is-dragging' class added by Draggabilly and '.is-positioning-post-drag' added by Packery for styling.

```css
/* highlight drag & drop */

/* Draggabilly adds is-dragging */
.grid-item.is-dragging,
/* Packery adds class while transitioning to drop position */
.grid-item.is-positioning-post-drag {
  background: #EA0;
  z-index: 2; /* keep dragged item on top */
}
```

--------------------------------

### CSS for Fixed Width Grid (CSS)

Source: https://packery.metafizzy.co/options

This CSS defines a grid with a fixed width of 320px. This is relevant when the `resize` option in Packery is set to `false`, as the layout will not adapt to window size changes.

```css
/* grid has fixed width */
.grid {
  width: 320px;
}
```

--------------------------------

### Style Packery Drop Placeholder

Source: https://packery.metafizzy.co/draggable

Styles the `.packery-drop-placeholder` element, which Packery dynamically creates to show where a dragged item will be dropped. This CSS adds an outline and a transition for smooth positioning changes.

```css
.packery-drop-placeholder {
  outline: 3px dashed #444;
  outline-offset: -6px;
  /* transition position changing */
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}
```

--------------------------------

### Add Spacing with gutter (jQuery, CSS)

Source: https://packery.metafizzy.co/options

Illustrates the 'gutter' option for adding horizontal and vertical space between items. It can be a number for fixed spacing or a selector string to use an element's width.

```javascript
gutter: 10
```

```html
<div class="grid">
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
```

```css
.grid-item { width: 22%; }

.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }
```

```javascript
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
```

--------------------------------

### Stamp Elements in Packery Layout (HTML & JavaScript)

Source: https://packery.metafizzy.co/options

The `stamp` option in Packery allows specific elements to be designated as 'stamped'. Packery will then lay out other items around these stamped elements. This functionality can be applied during initialization or to additional elements using the `stamp` method.

```html
<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>
```

```javascript
// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'
```

--------------------------------

### Add items to Packery instance

Source: https://packery.metafizzy.co/methods

Adds item elements to the Packery instance without laying them out. Accepts a single element, jQuery object, NodeList, or an array of elements.

```jQuery
$grid.packery( 'addItems', elements )
```

```vanilla JS
pckry.addItems( elements )
```

--------------------------------

### Align Items with columnWidth (jQuery, CSS)

Source: https://packery.metafizzy.co/options

Shows how to use the 'columnWidth' option to align grid items horizontally. It can be set to a number for fixed width or a selector string to use an element's width for responsive layouts.

```javascript
columnWidth: 60
```

```html
<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
```

```css
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
```

```javascript
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
```

--------------------------------

### Control Horizontal Flow (Right-to-Left) (JavaScript)

Source: https://packery.metafizzy.co/options

The `originLeft: false` option controls the horizontal flow of the layout. By default, items are positioned from left to right (`originLeft: true`). Setting it to `false` enables right-to-left positioning, similar to `isOriginLeft` in Packery v1.

```javascript
originLeft: false
```

--------------------------------

### Stagger Item Transitions (JavaScript)

Source: https://packery.metafizzy.co/options

The `stagger` option creates a sequential transition effect for items. Items animate incrementally after one another. This can be set using a CSS time format like '0.03s' or a number in milliseconds, such as 30.

```javascript
stagger: 30
```

--------------------------------

### Unstamp Elements (jQuery & Vanilla JS)

Source: https://packery.metafizzy.co/methods

Provides the syntax for using the `unstamp` method to remove stamped elements from Packery's layout management.

```jquery
$grid.packery( 'unstamp', elements )
```

```vanilla-javascript
pckry.unstamp( elements )
```

--------------------------------

### Packery dragItemPositioned Event

Source: https://packery.metafizzy.co/events

Shows how to use the 'dragItemPositioned' event in Packery, fired after an item has been dragged and its positioning transition ends. Includes the 'draggedItem' argument.

```javascript
// jQuery
$grid.on( 'dragItemPositioned', function( event, draggedItem ) {...} )
// vanilla JS
pckry.on( 'dragItemPositioned', function( draggedItem ) {...} )

$grid.on( 'dragItemPositioned',
  function( event, draggedItem ) {
    console.log( 'Packery drag item positioned',
      draggedItem.element );
  }
);

```

--------------------------------

### Destroy Packery instance

Source: https://packery.metafizzy.co/methods

Removes the Packery functionality completely, returning the element to its pre-initialized state. Can be used to toggle Packery on and off.

```jQuery
$grid.packery('destroy')
```

```vanilla JS
pckry.destroy()
```

```jQuery Example
var packeryOptions = {
  itemSelector: '.grid-item',
  columnWidth: 80
};
// initialize Packery
var $grid = $('.grid').packery( packeryOptions );
var isActive = true;

$('.toggle-button').on( 'click', function() {
  if ( isActive ) {
    $grid.packery('destroy'); // destroy
  } else {
    $grid.packery( packeryOptions ); // re-initialize
  }
  // set flag
  isActive = !isActive;
});
```

--------------------------------

### Style jQuery UI Drag and Drop

Source: https://packery.metafizzy.co/draggable

Applies styles to indicate drag and drop states for items using jQuery UI Draggable. It targets the '.ui-draggable-dragging' class added by jQuery UI and Packery's '.is-positioning-post-drag' class for visual feedback.

```css
/* highlight drag & drop */

/* jQuery UI Draggable adds ui-draggable-dragging */
.grid-item.ui-draggable-dragging,
/* Packery adds class while transitioning to drop position */
.grid-item.is-positioning-post-drag {
  background: #EA0;
  z-index: 2; /* keep dragged item on top */
}
```

--------------------------------

### Align Items with rowHeight (jQuery, CSS)

Source: https://packery.metafizzy.co/options

Demonstrates using the 'rowHeight' option to align grid items vertically. Similar to 'columnWidth', it can be a number or a selector string for element-based sizing.

```javascript
rowHeight: 60
```

```html
<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  ...
</div>
```

```css
/* height of 1 row */
.grid-sizer,
.grid-item { height: 60px; }
/* 2 rows high */
.grid-item--height2 { height: 120px; }
```

```javascript
// use outer width of grid-sizer for columnWidth
itemSelector: '.grid-item',
rowHeight: '.grid-sizer',
percentPosition: true
```

--------------------------------

### Reload Packery items

Source: https://packery.metafizzy.co/methods

Recollects all item elements. This is useful for frameworks like React and Angular to apply DOM changes to Packery.

```jQuery
$grid.packery('reloadItems')
```

```vanilla JS
pckry.reloadItems()
```
Tokens:
Raw