Options

All options are optional, but columnWidth and itemSelector are recommended.

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.item'
});
// with jQuery
$('#container').masonry({
  columnWidth: 200,
  itemSelector: '.item'
});
<!-- in HTML -->
<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

itemSelector

Type: Selector String

Specifies which child elements to be used as item elements. Setting itemSelector is always recommended. itemSelector is useful to exclude sizing elements.

"itemSelector": ".item"

columnWidth

Type: Number, Element, or Selector String

The width of a column of a horizontal grid.

If columnWidth is not set, Masonry will use the outer width of the first element.

"columnWidth": 60

If set to an Element or Selector String, Masonry will use the width of that element. See Element sizing. Setting columnWidth with element sizing is recommended if you are using percentage widths. Enable percentPosition to set item position in percent values, to reduce layout transitions on resize.

<div class="masonry">
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
.grid-sizer { width: 20%; }
.item { width: 20%; }
.item.w2 { width: 40%; }
"columnWidth": ".grid-sizer",
"itemSelector": ".item",
"percentPosition": true

gutter

Type: Number, Element, or Selector String

The horizontal space between item elements.

To set vertical space between elements, use margin CSS.

"gutter": 10
#gutter-opt-demo2 .item {
  margin-bottom: 10px;
}

If set to an Element or Selector String, Masonry will use the width of that element. See Element sizing.

<div id="gutter-opt-demo3">
  <div class="gutter-sizer"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
#gutter-opt-demo3 .gutter-sizer { width: 3%; }
"gutter": ".gutter-sizer",
"itemSelector": ".item"

Element sizing

For the sizing options columnWidth and gutter, you may set these options to an Element or String, in addition to a Number.

With an Element, Masonry will use its outer width to set the value of the related property.

<div id="container">
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  itemSelector: '.item',
  columnWidth: container.querySelector('.grid-sizer')
});

With a String, Masonry will use the string as a selector to get the first matching element within the container element. The size of that element is then used.

"columnWidth": ".grid-sizer"

This allows you to control the size of the Masonry layout just with your CSS. This is useful for responsive layouts, keeping control within CSS so you can rely on media queries.

/* 5 columns by default */
.grid-sizer { width: 20%; }

@media screen and (min-width: 720px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 10%; }
}

If you are using element sizing, be sure to set itemSelector as well, so the sizing element does not get used in the layout.

percentPosition

Type: Boolean

Default: false

Will set item position in percent values, rather than pixel values. percentPosition works well with percent-width items, as items will not transition their position on resize.

.grid-sizer { width: 20%; }
.item { width: 20%; }
.item.w2 { width: 40%; }
"columnWidth": ".grid-sizer",
"itemSelector": ".item",
"percentPosition": true

stamp

Type: Element, NodeList, Array of Elements, or Selector String

Specifies which elements are stamped within the layout. These are special layout elements which will not be laid out by Masonry. Rather, Masonry will layout item elements below stamped elements.

The stamp option stamps elements only when the Masonry instance is first initialized. You can stamp additional elements afterwards with the stamp method.

<div id="stamp-opt-demo">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="item"></div>
  <div class="item"></div>
  ....
</div>
"itemSelector": ".item",
"stamp": ".stamp"
/* position stamp elements with CSS */
#stamp-opt-demo {
  position: relative;
}
#stamp-opt-demo .stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}
#stamp-opt-demo .stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}
#stamp-opt-demo .stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

isFitWidth

Type: Boolean

Default: false

Sets the width of the container to fit the available number of columns, based the size of container's parent element. When enabled, you can center the container with CSS.

This option does not work with element sizing with percentage width. Either columnWidth needs to be set to a fixed size, like columnWidth: 120, or items need to have a fixed size in pixels, like width: 120px. Otherwise, the container and item widths will collapse on one another.

"isFitWidth": true
/* center container with CSS */
#fit-width .masonry {
  margin: 0 auto;
}

isOriginLeft

Type: Boolean

Default: true

Controls the horizontal flow of the layout. By default, item elements start positioning at the left. Set to false for right-to-left layouts.

"isOriginLeft": false

isOriginTop

Type: Boolean

Default: true

Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts. It’s like Tetris!

"isOriginTop": false

containerStyle

Type: Object

Default: { position: 'relative' }

CSS styles that are applied to the container element. To disable Masonry from setting any CSS to the container element, set containerStyle: null.

isInitLayout

Type: Boolean

Default: true

Enables layout on initialization. Set this to false to disable layout on initialization, so you can use methods or add events before the initial layout.

var msnry = new Masonry( container, {
  // disables initial layout
  isInitLayout: false
});
msnry.on( 'layoutComplete', function() {
  console.log('layout is complete');
});
// manually trigger initial layout
msnry.layout();

isResizeBound

Type: Boolean

Default: true

Binds layout to window resizing.

isResizeBound binds layout only when the Masonry instance is first initialized. You can bind and unbind resize layout afterwards with the bindResize and unbindResize methods.

transitionDuration

Type: String

Default: '0.4s'

Duration of the transition when items change position or appearance, set in a CSS time format.

To disable all transitions, set transitionDuration: 0.

hiddenStyle

Type: Object

Default: { opacity: 0, transform: 'scale(0.001)' }

The style applied to hide items.

visibleStyle

Type: Object

Default: { opacity: 1, transform: 'scale(1)' }

The style applied to reveal hidden items.