logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
6.0.0-alpha.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
      DEPRECATED
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
Responsive
Image
Dynamic
API
Masonry
MasonryItem
Gap
Semantic DOM
Design Token

Masonry

Importimport { Masonry } from "antd";
Sourcecomponents/masonry
Docs
Edit this pageChangelog
Versionsupported since 6.0.0
contributors
  • LayoutSpace

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community
    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

    ParameterDescriptionTypeDefault Value
    classNamesSemantic structure classNameRecord<SemanticDOM, string>-
    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-
    stylesSemantic structure styleRecord<SemanticDOM, CSSProperties>-
    onLayoutChangeCallback for column sorting changes({ key: React.Key; column: number }[]) => void-

    MasonryItem

    ParameterDescriptionTypeDefault 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
    type Gap = undefined | number | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>>;

    Semantic DOM

    Design Token

    Global TokenHow to use?
    Basic

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

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Image

    Dynamically adjust the height of images as they load.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Dynamic

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

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    • root
      Root element
    • item
      Item element