Importimport { Masonry } from "antd"; |
Sourcecomponents/masonry |
Versionsupported since 6.0.0 |
Importimport { Masonry } from "antd"; |
Sourcecomponents/masonry |
Versionsupported since 6.0.0 |
A masonry layout component for displaying content with different heights.
Common props ref：Common props
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| classNames | Semantic structure className | Record<SemanticDOM, string> | - |
| 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 | Semantic structure style | Record<SemanticDOM, CSSProperties> | - |
| onLayoutChange | Callback for column sorting changes | ({ key: React.Key; column: number }[]) => void | - |
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| 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 | - |
Gap represents the spacing between items. It can either be a fixed value or a responsive configuration.
type Gap = undefined | number | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>>;