Packery – The gapless, draggable grid layouts library


The Packery Script creates in-packing layouts, which allows it to be used for draggable interactions. The script author also wrote the well-known Masonry script as well as the Isotope script. However, it’s also licensed under the GNU GPLv3 and chargeable for commercial non-open-source projects! It is also usable without the jQuery library but dropped the Internet Explorer 8/9 support in Version 2.0.0 (like the Masonry script did in 3.0.0).

Download the latest version of Packery as .ZIP or as .TAR package!

npm i packery --save

yarn add packery --save

bower install packery --save


The Packery script is based on just a single JavaScript file, which is available as minified and normal version. But it still require some additional styles, depending on the used settings (see below)!


Load Packery

The single JavaScript file for the script can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/packery.pkgd.min.js"></script>


Configure Packery

This draggable Layout Library has some settings to configure the design and behavior, it may work also without any settings but it’s highly recommended to configure at least the itemSelector as well as the columnWidth options to prevent errors!

document.addEventListener("DOMContentLoaded", {
    var pckry = new Packery(".my-grid", {
        itemSelector:       ".grid-item",
        columnWidth:        undefined,
        rowHeight:          null,
        gutter:             0,
        percentPosition:    false,
        stamp:              undefined,
        horizontal:         false,
        originLeft:         true,
        originTop:          true,
        containerStyle:     null,
        transitionDuration: "0.4s",
        stagger:            30,
        shiftResize:        true,
        resize:             true,
        initLayout:         true


Configure: Options

Specifies which child elements will be used as item elements in the layout. We recommend always setting itemSelector. itemSelector is useful to exclude sizing elements or other elements that are not part of the layout.
Aligns items to a horizontal grid. We recommend setting columnWidth. If columnWidth is not set, Masonry will use the outer width of the first item.
Aligns items to a vertical grid. rowHeight is not required for grid layouts, but may help align items when dragging items in a horizontal layout.
Adds horizontal space between item elements.
Sets item positions in percent values, rather than pixel values. percentPosition: true works well with percent-width items, as items will not transition their position on resize.
Specifies which elements are stamped within the layout. Masonry will layout items below stamped elements. The stamp option stamps elements only when the Masonry instance is first initialized. You can stamp additional elements afterwards with the stamp method.
Lays out items horizontally instead of vertically.
Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with originLeft: true. Set originLeft: false for right-to-left layouts.
Controls the vertical flow of the layout. By default, item elements start positioning at the top, with originTop: true. Set originTop: false for bottom-up layouts. It’s like Tetris!
CSS styles that are applied to the container element.
Duration of the transition when items change position or appearance, set in a CSS time format.
Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format, ‘0.03s’, or as a number in milliseconds, 30.
Adjusts sizes and positions when window is resized. Enabled by default resize: true.
Adjusts sizes and positions when window is resized.
Enables layout on initialization. Set initLayout to false to disable layout on initialization, so you can use methods or add events before the initial layout.

Leave a Reply