Masonry
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
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} />

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia
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} />

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam
Uniform row heights
Using the MasonryUniformRowLayout
layout.
import { Masonry, MasonryUniformRowLayout } from 'gestalt';
<Masonry comp={Item} items={items} layout={MasonryUniformRowLayout} />;

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam

the Hang Son Doong cave in Vietnam

La Gran Muralla, Pekín, China

Plitvice Lakes National Park, Croatia

Ban Gioc – Detian Falls : 2 waterfalls straddling the Vietnamese and Chinese border.

Border of China and Vietnam