Masonry

Cascading grid layout plugin

Layout
desandro/masonrymasonry.desandro.commasonry-layout

README

Masonry


_Cascading grid layout library_

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

See masonry.desandro.com for complete docs and demos.

Install


Download


+ masonry.pkgd.js un-minified, or
+ masonry.pkgd.min.js minified

CDN


Link directly to Masonry files on unpkg.

  1. ``` html
  2. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  3. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  4. ```

Package managers


npm:npm install masonry-layout --save

Bower: bower install masonry-layout --save

Support Masonry development


Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.

Initialize


With jQuery

  1. ``` js
  2. $('.grid').masonry({
  3.   // options...
  4.   itemSelector: '.grid-item',
  5.   columnWidth: 200
  6. });
  7. ```

With vanilla JavaScript

  1. ``` js
  2. // vanilla JS
  3. // init with element
  4. var grid = document.querySelector('.grid');
  5. var msnry = new Masonry( grid, {
  6.   // options...
  7.   itemSelector: '.grid-item',
  8.   columnWidth: 200
  9. });

  11. // init with selector
  12. var msnry = new Masonry( '.grid', {
  13.   // options...
  14. });
  15. ```

With HTML

Add a data-masonry attribute to your element. Options can be set in JSON in the value.

  1. ``` html
  2. <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  3.   <div class="grid-item"></div>
  4.   <div class="grid-item"></div>
  5.   ...
  6. </div>
  7. ```

License


Masonry is released under the MIT license. Have at it.


Made by David DeSandro