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  › 

    • 🔾78%Overall
    • 11,684
    • 13.4 days
    • 🕩1982
    • 👥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

    Bower: bower install masonry --save

    npm: npm install masonry-layout --save


    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