VOOZH about

URL: https://ant.design/components/masonry/

⇱ Masonry - Ant Design

LayoutSpace
👁 loading

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

API

Common props ref：Common props

Masonry

PropertyDescriptionTypeDefaultVersionGlobal Config
classNamesCustomize class for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-6.0.06.0.0
columnsNumber of columns, can be a fixed value or a responsive configurationnumber | { xs?: number; sm?: number; md?: number }3×
freshWhether to continuously monitor the size changes of child itemsbooleanfalse×
gutterSpacing, can be a fixed value, responsive configuration, or a configuration for horizontal and vertical spacingGap | [Gap, Gap]0×
itemsMasonry itemsMasonryItem[]-×
itemRenderCustom item rendering function(item: MasonryItem) => React.ReactNode-×
stylesCustomize inline style for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-6.0.06.0.0
onLayoutChangeCallback for column sorting changes({ key: React.Key; column: number }[]) => void-×

MasonryItem

PropertyDescriptionTypeDefault Value
childrenCustom display content, takes precedence over itemRenderReact.ReactNode-
columnSpecifies the column to which the item belongsnumber-
dataCustom data storageT-
heightHeight of the itemnumber-
keyUnique identifier for the itemstring | number-

Gap

Gap represents the spacing between items. It can either be a fixed value or a responsive configuration.

ts
typeGap=undefined|number| Partial<Record<'xs'|'sm'|'md'|'lg'|'xl'|'xxl',number>>;

Semantic DOM

Design Token

Global TokenHow to use?
Token NameDescriptionTypeDefault Value
motionDurationFastMotion speed, fast speed. Used for small element animation interaction.string0.1s
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
motionEaseOutPreset motion curve.string
cubic-bezier(0.215, 0.61, 0.355, 1)
Basic

Basic usage. Set number of columns with columns and spacing with gutter.

Responsive

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.

Image

Dynamically adjust the height of images as they load.

Dynamic

Demonstrate how masonry layout updates dynamically. Use item.column to keep items in place.

Custom semantic dom styling

You can customize the semantic dom style of Masonry by passing objects/functions through classNames and styles.

classNames and styles Object

classNames and styles Function

  • 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