Masonry
A responsive masonry layout for items with varied heights.
When to use
Use Masonry for independent cards, images, or content blocks that intentionally form ragged columns.
Examples
API
Masonry and MasonryProps are exported from @ceebee/ui/client.
Masonry
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 |
columns | Number of columns, can be a fixed value or a responsive configuration | number | { xs?: number; sm?: number; md?: number } | 3 | — |
fresh | Whether to continuously monitor the size changes of child items | boolean | false | — |
gutter | Spacing, can be a fixed value, responsive configuration, or a configuration for horizontal and vertical spacing | Gap | \[Gap, Gap\] | 0 | — |
items | Masonry items | MasonryItem[] | - | — |
itemRender | Custom item rendering function | (item: MasonryItem) => React.ReactNode | - | — |
styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 |
onLayoutChange | Callback for column sorting changes | ({ key: React.Key; column: number }[]) => void | - | — |
MasonryItem
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
children | Custom display content, takes precedence over itemRender | React.ReactNode | - | — |
column | Specifies the column to which the item belongs | number | - | — |
data | Custom data storage | T | - | — |
height | Height of the item | number | - | — |
key | Unique identifier for the item | string | number | - | — |