Masonry
Arrange items in a masonry layout.
A masonry layout component for displaying content with different heights.
When To Use
- When displaying images or cards with irregular heights
- When content needs to be evenly distributed in columns
- When column count needs to be responsive
Examples
- Basic ·
basic - Responsive ·
responsive - Image ·
image - Dynamic ·
dynamic - Custom semantic dom styling ·
style-class
API
Common props ref：Common props
Masonry
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| 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 | 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 | 6.0.0 |
| onLayoutChange | Callback for column sorting changes | ({ key: React.Key; column: number }[]) => void | - | × |
MasonryItem
| Property | 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
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>>;
Semantic DOM
| Semantic node | Native description | Version |
|---|---|---|
root | Root element, sets relative positioning, flex layout and masonry container styles | — |
item | Item element, sets absolute positioning, width calculation, transition animation and masonry item styles | — |
Semantic description source: vendor/components/masonry/demo/_semantic.tsx
Design Token
Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.
Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.
Declaration source: vendor/components/masonry/style/index.ts
import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genStyleHooks } from '../../theme/internal';
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
export interface ComponentToken {}
export interface MasonryToken extends FullToken<'Masonry'> {}
Shared native props
Tips: The following generic properties apply to most antd components; those not supported are described separately.
| Property | Description | Type | Default |
|---|---|---|---|
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |
Install and reproduce an example
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.
Native type references
The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.
vendor/components/masonry/Masonry.tsxvendor/components/masonry/MasonryItem.tsxvendor/components/masonry/hooks/usePositions.tsvendor/components/masonry/style/index.ts
Source and license
https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd
Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.