masonry

grid layout responsive

Masonry is a JavaScript library that facilitates a cascading grid layout, allowing for an efficient, gap-free arrangement of elements of varying sizes.

Latest Ver 4.2.2

Homepage

Github

16,569

📢 Masonry is a JavaScript library for dynamically arranging elements in a grid pattern on web pages.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.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 id='masonry-container'>
  <div class='item'>Item 1</div>
  <div class='item'>Item 2</div>
  <div class='item'>Item 3</div>
  <div class='item'>Item 4</div>
  <div class='item'>Item 5</div>
</div>

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

⚙️ JavaScript
var msnry = new Masonry('#masonry-container', { itemSelector: '.item', columnWidth: 100 });

⚡ Top Tools for Developers