The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Layout elements in a grid, like a mason fitting stones in a wall
    Filed under  › 

    • 🔾74%Overall
    • 16,188
    • 37.4 days
    • 🕩2153
    • 👥7


    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 for complete docs and demos.




    Link directly to Masonry files on unpkg.

    <script src=""></script>
    <!-- or -->
    <script src=""></script>

    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.


    With jQuery

      // options...
      itemSelector: '.grid-item',
      columnWidth: 200

    With vanilla JavaScript

    // vanilla JS
    // init with element
    var grid = document.querySelector('.grid');
    var msnry = new Masonry( grid, {
      // options...
      itemSelector: '.grid-item',
      columnWidth: 200
    // init with selector
    var msnry = new Masonry( '.grid', {
      // options...

    With HTML

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

    <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
      <div class="grid-item"></div>
      <div class="grid-item"></div>


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

    Made by David DeSandro

    Show All