ant-design/components/masonry/index.en-US.md

category, group, title, cover, coverDark, demo, tag

category	group	title	cover	coverDark	demo	tag
Components	Layout	Masonry	https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cELTRrM5HpAAAAAAOGAAAAgAegCCAQ/original	https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2CxJRYJmfbIAAAAAPqAAAAgAegCCAQ/original	cols 1	6.0.0

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 Responsive Image Dynamic Custom semantic dom styling Fresh

API

Common props ref：Common props

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>	-
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>	-
onLayoutChange	Callback for column sorting changes	({ key: React.Key; column: number }[]) => void	-

MasonryItem

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

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

Design Token