Options

Options are set with an object as the second argument to the Masonry constructor. All options are optional, and do not need to be set, but columnWidth is recommended.

window.onload = function() {
  // initialize Masonry instance
  var wall = new Masonry( document.getElementById('container'), {
    // options...
    columnWidth: 240,
    gutterWidth: 20,
    isFitWidth: true
  });
  // change an option after initialization
  wall.options.columnWidth = 200;
};

option

Type

Default

columnWidth

columnWidth

Integer or Function

Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element. Recommended if your layout has item elements that have multiple-column widths.

See Demo: Basic multi-column.

To set a dynamic column width, you can pass in a function that returns the value column width. The function provides an argument for the width of the container. Use this technique for fluid or responsive layouts.

var wall = new Masonry( document.getElementById('container'), {
  // dynamically set column width to 1/5 the width of the container
  columnWidth: function( containerWidth ) {
    return containerWidth / 5;
  }
});

See Demo: Fluid.

gutterWidth

gutterWidth

Integer

0

Adds additional spacing between columns.

See Demo: Gutters.

isFitWidth

isFitWidth

Boolean

false

If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container’s parent element, not the width of the container. This option is ideal for centering Masonry layouts.

See Demo: Centered.

isResizable

isResizable

Boolean

true

Triggers layout logic when browser window is resized.

isRTL

isRTL

Boolean

false

Enables right-to-left layout for languages like Hebrew and Arabic.

See Demo: Right-to-left.