masonry.desandro.com

1.  [Masonry](.)

2.  [Layout](/layout)

3.  [Options](/options)

4.  [Methods](/methods)

5.  [Events](/events)

6.  [Extras](/extras)

7.  [FAQ](/faq)

Masonry

=======

Cascading grid layout library

[Download masonry.​pkgd.​min.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js)

[Download these docs](masonry-docs.zip)

[Masonry on GitHub](https://github.com/desandro/masonry)

What is Masonry?

----------------

Masonry is a JavaScript grid layout library. It 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.

[

Erik Johansson

](http://erikjohanssonphoto.com/work/imagecats/personal/)

[

Beyoncé | I Am

](http://iam.beyonce.com/)

[

Webster Hall Timeline

](http://www.websterhall.com/timeline/)

[

Halcyon theme

](http://halcyon-theme.tumblr.com/)

[

RESIZE.THATSH.IT

](http://resize.thatsh.it/)

[

Tumblr Staff: Archive

](http://staff.tumblr.com/archive)

[

Kristian Hammerstad

](http://www.kristianhammerstad.com/)

[

Loading Effects for Grid Items | Demo 2

](http://tympanus.net/Development/GridLoadingEffects/index2.html)

*   [Install](#install)

*   [Download](#download)

*   [CDN](#cdn)

*   [Package managers](#package-managers)

*   [Getting started](#getting-started)

*   [HTML](#html)

*   [CSS](#css)

*   [Initialize with jQuery](#initialize-with-jquery)

*   [Initialize with Vanilla JavaScript](#initialize-with-vanilla-javascript)

*   [Initialize in HTML](#initialize-in-html)

*   [Next](#next)

*   [MIT License](#mit-license)

Install

-------

### Download

*   [masonry.pkgd.min.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js) minified, or

*   [masonry.pkgd.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js) un-minified

### CDN

Link directly to Masonry files on [unpkg](https://unpkg.com).

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

    <!-- or -->

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

### Package managers

Install with [Bower](https://bower.io):  `bower install masonry --save`

[Install with npm](https://www.npmjs.com/package/masonry-layout):  `npm install masonry-layout`

Getting started

---------------

### HTML

Include the Masonry `.js` file in your site.

    <script src="/path/to/masonry.pkgd.min.js"></script>

Masonry works on a container grid element with a group of child items.

    <div class="grid">

      <div class="grid-item">...</div>

      <div class="grid-item grid-item--width2">...</div>

      <div class="grid-item">...</div>

      ...

    </div>

### CSS

All sizing of items is handled by your CSS.

    .grid-item { width: 200px; }

    .grid-item--width2 { width: 400px; }

### Initialize with jQuery

You can use Masonry as a jQuery plugin: `$('selector').masonry()`.

    $('.grid').masonry({

      // options

      itemSelector: '.grid-item',

      columnWidth: 200

    });

### Initialize with Vanilla JavaScript

You can use Masonry with vanilla JS: `new Masonry( elem, options )`. The `Masonry()` constructor accepts two arguments: the container element and an options object.

    var elem = document.querySelector('.grid');

    var msnry = new Masonry( elem, {

      // options

      itemSelector: '.grid-item',

      columnWidth: 200

    });

    // element argument can be a selector string

    //   for an individual element

    var msnry = new Masonry( '.grid', {

      // options

    });

### Initialize in HTML

You can initialize Masonry in HTML, without writing any JavaScript. Add `data-masonry` attribute to the container element. [Options](/options) can be set in its value.

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

[Edit this demo on CodePen](https://codepen.io/desandro/pen/vLeBLV)

Options set in HTML must be valid JSON. Keys need to be quoted, for example `"itemSelector":`. Note the value of `data-masonry` is set with single quotes `'`, but JSON entities use double-quotes `"`.

HTML initialization was previously done with a class of `js-masonry` and setting options in `data-masonry-options` in Masonry v3. Masonry v4 is backwards compatible with this code.

    <div class="grid js-masonry"

      data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Next

----

Learn more about how to use Masonry:

*   [Layout](/layout)

*   [Options](/options)

*   [Methods](/methods)

MIT License

-----------

Masonry is released under the [MIT License](https://desandro.mit-license.org/). Have at it.

1.  [Masonry](.)

2.  [Layout](/layout)

3.  [Options](/options)

4.  [Methods](/methods)

5.  [Events](/events)

6.  [Extras](/extras)

7.  [FAQ](/faq)

Masonry is made by [David DeSandro](https://desandro.com). Make something rad with it.   Dave also makes:

*   [

    ### Isotope

    Filter & sort magical layouts

    ](https://isotope.metafizzy.co)

*   [

    ### Infinite Scroll

    Automatically add next page

    ](https://infinite-scroll.com)

*   [

    ### Flickity

    Touch, responsive, flickable carousels

    ](https://flickity.metafizzy.co)

*   [

    ### Packery

    Gapless, draggable grid layouts

    ](https://packery.metafizzy.co)

*   [

    ### Logo Pizza

    Hot & ready logos for sale

    ](http://logo.pizza)

*   [

    ### Fizzy School

    Lessons in JavaScript for jQuery newbies

    ](http://fizzy.school)