Masonry
Masonry
Importimport{ Masonry }from"antd"; |
Sourcecomponents/masonry |
Versionsupported since 6.0.0 |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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>>;
Basic usage. Set number of columns with columns and spacing with gutter.
Responsive layout adapts to different screen widths. Use columns to specify the number of columns at different breakpoints, and gutter to adjust spacing between items.
Dynamically adjust the height of images as they load.
Demonstrate how masonry layout updates dynamically. Use item.column to keep items in place.
