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`	-
	A React component (or stateless functional component) that renders the item you would like displayed in the grid. This component is passed three props: `data: T`, `itemIdx: number`, and `isMeasuring: boolean`.
`items` Required	`T[]`	-
	An array of items to display that contains the information that `comp` needs to render.
`columnWidth`	`number`	`236`
	Specifies a fixed width of elements in the grid. However, using flexible is preferred.
`flexible`	`boolean`	`false`
	Item width will grow to fill column space and shrink to fit if below min columns.
`gutterWidth`	`number`	`"null"`
	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`	`() => void`	-
	A callback when the user scrolls and you need to load more items into the grid. 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`.
`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 virtualizing.

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