https://github.com/metafizzy/packery
:bento: Gapless, draggable grid layouts
https://github.com/metafizzy/packery
Last synced: about 2 months ago
JSON representation
:bento: Gapless, draggable grid layouts
- Host: GitHub
- URL: https://github.com/metafizzy/packery
- Owner: metafizzy
- Created: 2012-11-09T13:23:57.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2025-03-08T03:49:11.000Z (4 months ago)
- Last Synced: 2025-05-08T21:08:19.788Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://packery.metafizzy.co
- Size: 738 KB
- Stars: 4,206
- Watchers: 95
- Forks: 315
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- Contributing: .github/contributing.md
Awesome Lists containing this project
- awesome-starred - metafizzy/packery - :bento: Gapless, draggable grid layouts (others)
README
# Packery
_Bin-packing layout library_
See [packery.metafizzy.co](https://packery.metafizzy.co) for complete docs and demos
## Install
### Download
+ [packery.pkgd.js](https://unpkg.com/packery@3/dist/packery.pkgd.js) un-minified, or
+ [packery.pkgd.min.js](https://unpkg.com/packery@3/dist/packery.pkgd.min.js) minified
### CDN
Link directly to Packery files on [unpkg](https://unpkg.com).
``` html
```
### Package managers
[npm](https://www.npmjs.com/package/packery): `npm install packery --save`
Bower: `bower install packery --save`
## License
Packery v3 is licensed under the MIT license.
## Initialize
With jQuery
``` js
$('.grid').packery({
// options...
itemSelector: '.grid-item'
});
```
With vanilla JavaScript
``` js
// vanilla JS
var grid = document.querySelector('.grid');
// initialize with element
var pckry = new Packery( grid, {
// options...
itemSelector: '.grid-item'
});
// initialize with selector string
var pckry = new Packery('.grid', {
// options...
});
```
With HTML
Add a `data-packery` attribute to your element. Options can be set in JSON in the value.
``` html
...
```
---
By [Metafizzy](http://metafizzy.co)