Masonry

View source on GitHub

Masonry creates a deterministic grid layout, positioning items based on available vertical space. It contains performance optimizations like virtualization and support for infinite scrolling.

Props

Component props
Name	Type	Default
`comp` Required	`React.ComponentType<{\| data: T, itemIdx: number, isMeasuring: boolean, \|}>`	-
	A React component (or stateless functional component) that renders the item you would like displayed in the grid. This component is passed three props: the item's data, the item's index in the grid, and a flag indicating if Masonry is currently measuring the item.
`items` Required	`$ReadOnlyArray<T>`	-
	An array of items to display that contains the information that `comp` needs to render.
`columnWidth`	`number`	`236`
	The preferred/target item width. If 'flexible' is set, the item width will grow to fill column space, and shrink to fit if below min columns.
`flexible`	`boolean`	-
	Item width will grow to fill column space and shrink to fit if below min columns.
`gutterWidth`	`number`	-
	The amount of vertical and horizontal space between each item, specified in pixels.
`layout`	`MasonryDefaultLayout \| MasonryUniformRowLayout`	`"MasonryDefaultLayout"`
	MasonryUniformRowLayout will make it so that each row is as tall as the tallest item in that row.
`loadItems`	`false \| (( ?{\| from: number, \|}, ) => void \| boolean \| { ... })`	-
	A callback which the grid calls when we need to load more items as the user scrolls. The callback should update the state of the items, and pass those in as props to this component. Note that `scrollContainer` must be specified.
`measurementStore`	`typeof MeasurementStore`	-
	Masonry internally caches item sizes/positions using a measurement store. If `measurementStore` is provided, Masonry will use it as its cache and will keep it updated with future measurements. This is often used to prevent re-measurement when users navigate away and back to a grid. Create a new measurement store with `Masonry.createMeasurementStore()`.
`minCols`	`number`	`3`
	Minimum number of columns to display.
`scrollContainer`	`() => HTMLElement`	-
	A function that returns a DOM node that Masonry uses for on-scroll event subscription. This DOM node is intended to be the most immediate ancestor of Masonry in the DOM that will have a scroll bar; in most cases this will be the `window` itself, although sometimes Masonry is used inside containers that have `overflow: auto`. `scrollContainer` is optional, although it is required for features such as `virtualize` and `loadItems`. This is required if the grid is expected to be scrollable.
`virtualBoundsBottom`	`number`	-
	If `virtualize` is enabled, Masonry will only render items that fit in the viewport, plus some buffer. `virtualBoundsBottom` allows customization of the buffer size below the viewport, specified in pixels.
`virtualBoundsTop`	`number`	-
	If `virtualize` is enabled, Masonry will only render items that fit in the viewport, plus some buffer. `virtualBoundsTop` allows customization of the buffer size above the viewport, specified in pixels.
`virtualize`	`boolean`	`false`
	Specifies whether or not Masonry dynamically adds/removes content from the grid based on the user's viewport and scroll position. Note that `scrollContainer` must be specified when virtualization is used.

Fluid number of columns

The number of columns in this grid changes responsively based on the width of the parent.

<Masonry
  comp={Item}
  items={this.state.pins}
  loadItems={this.loadItems}
  minCols={1}
/>

Flexible item width

When the flexible property is set to true, the item width will shrink/grow to fill the container. This is great for responsive designs.

<Masonry flexible comp={Item} items={items} minCols={1} />

Container Width

Non-flexible item width

When the flexible property is omitted, the item width will be fixed to columnWidth.

<Masonry comp={Item} items={items} minCols={1} />

Container Width

Uniform row heights

Using the MasonryUniformRowLayout layout.

import { Masonry, MasonryUniformRowLayout } from 'gestalt';
<Masonry comp={Item} items={items} layout={MasonryUniformRowLayout} />;

Container Width

Edit page on GitHub