Masonry is installed into your project as a file you own. It takes the same props as Ant Design v6's Masonry and adds no prop, default or class of its own, so nothing in the API table below is marked antuikit.
Masonry paints nothing. It measures each item, drops it into whichever column is currently shortest, and positions it absolutely inside a root whose height it sets from the tallest column. Every border, radius and background in the wall comes from what you return out of itemRender.
Install
npx antuikit@latest init
npx antuikit@latest add masonry
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/masonry, never from antd. The file lives in your project, so the import is a path, not a package.
import { Masonry } from "@/components/ui/masonry"
The axes
Masonry has no variant, emphasis or shape prop. It renders no surface of its own, so there is nothing for them to change.
You configure it with numbers. columns is a number or an object keyed by breakpoint. An object uses the largest breakpoint that matches and falls back to columns.xs, then to 1. The breakpoints are the same as Grid's, so lg starts at 992px, and a lg: class next to the wall changes at the same width.
gutter is the other one, and it defaults to 0. A number sets both axes. A [horizontal, vertical] pair sets them apart, and each value can be an object keyed by breakpoint, as on Row. A responsive gutter needs an sm key: xs only applies below 576px, so { xs: 4, md: 24 } leaves no gap from 576 to 767px. The horizontal gutter comes out of the card width, so a wider gutter narrows the cards instead of overflowing the container.
Flags
One, and it trades stability for accuracy.
fresh watches every item for resize and re-packs on each one. Off (the default), Masonry re-measures only when items or the column count changes, when the container resizes, or when an image inside it loads or fails, so cards stay where they are while you scroll.
It fixes an item that grows in place. Expand a card without it and the card below can end up overlapped. Turn fresh on for that case, not by default.
Slots
Masonry takes no children. You pass data and a renderer, so it can measure and re-place an item without re-running your tree.
itemRender turns one entry of items into a node. It receives the entry spread with its index and the column it landed in. Pass your item type to Masonry and data arrives typed, with no any and no cast. Changing the column in the callback does not move the item.
An entry's own children replaces itemRender for that entry. Use it for one odd card in an otherwise uniform list.
An entry's key is required and must be stable. An index key re-places the wrong card as soon as the list is filtered or reordered.
An entry may also carry column, which pins it to that column instead of the shortest one. An index past the end lands in the last column.
Events
onLayoutChange fires with each item's column once every item has a position.
Styling
classNames and styles take the same two keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions.
1
<Masonry
2
classNames={{
3
root: "…",
4
item: "…",
5
}}
6
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.