packery

layout ui-component responsive

Packery is a library that helps efficiently arrange elements of varying sizes by using a 'bin-packing' algorithm, which fits elements together with minimal gaps. It's particularly useful for dynamically arranging elements on a webpage.

Latest Ver 3.0.0

Homepage

Github

4,203

Every piece in its place, a perfect harmony

Expand the possibilities of your webpage with endlessly adaptable layouts.

Packery is a library for efficient arrangement of web elements.

CDN Download

License: GPL-3.0

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/packery/3.0.0/packery.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/packery/3.0.0/packery.pkgd.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div class="grid"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><script>var elem = document.querySelector('.grid');var pckry = new Packery(elem, {itemSelector: '.item', gutter: 10});</script>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.2/packery.pkgd.min.js"></script>

⚙️ JavaScript
var elem = document.querySelector('.grid');var pckry = new Packery(elem, {itemSelector: '.item', gutter: 10});