#Masonry

A Pinterest-style multi-column layout that arranges items to minimize vertical gaps.

#When to Use

• For image galleries or card grids with varying heights
• When items have different sizes and you want a dense layout
• For responsive multi-column content without fixed row heights

#Import

import { Masonry } from "orizon";

#Examples

#Basic Masonry

Items flow into columns, filling vertical space efficiently.

<Masonry columns={3} gutter={8}>
  <div style={{ height: "80px" }}>Item 1</div>
  <div style={{ height: "120px" }}>Item 2</div>
  <div style={{ height: "60px" }}>Item 3</div>
  <div style={{ height: "100px" }}>Item 4</div>
  <div style={{ height: "140px" }}>Item 5</div>
  <div style={{ height: "90px" }}>Item 6</div>
</Masonry>

#Column Counts

Control the number of columns.

<Masonry columns={2} gutter={8}>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</Masonry>

<Masonry columns={4} gutter={8}>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</Masonry>

#Custom Gutter

Set different horizontal and vertical gaps.

<Masonry columns={3} gutter={[16, 8]}>
  <div>Item 1</div>
  <div>Item 2</div>
  ...
</Masonry>

#Responsive Columns

Pass a breakpoint object to adjust columns at different screen sizes.

<Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gutter={12}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Masonry>

#API

#MasonryProps

• columns — number | ResponsiveObject — Number of columns (default: 2)
• gutter — number | [number, number] — Gap between items, or [horizontal, vertical] (default: 0)
• items — any[] — Array of data items (used with itemRender)
• itemRender — (item: any, index: number) => ReactNode — Custom render function for items
• sequential — boolean — Whether to render items sequentially (default: false)
• className — string — Custom CSS class
• style — CSSProperties — Inline styles