# antuikit / Masonry

> Masonry, a column layout for items of uneven height. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/masonry

## Install

npx antuikit@latest init
npx antuikit@latest add masonry

## Import

import { Masonry } from "@/components/ui/masonry";

## Demos

- [Basic](https://ui.antuikit.com/embed/masonry/basic.md): Pass `items` and an `itemRender` function, and each card drops into the shortest of the `columns`, so quotes of any length pack without gaps.
- [Responsive columns](https://ui.antuikit.com/embed/masonry/responsive.md): Pass `columns` an object keyed by breakpoint to change the column count with the screen width, from one column on a phone to four on a desktop.
- [Photos](https://ui.antuikit.com/embed/masonry/images.md): Render a bare `img` from `itemRender` to lay out a photo grid, with each picture cropped to its own aspect ratio.
- [Gutter](https://ui.antuikit.com/embed/masonry/gutter.md): Set `gutter` to space the items: one number, a `[horizontal, vertical]` pair, or a value per breakpoint.
- [Separate gutters](https://ui.antuikit.com/embed/masonry/gutter-pair.md): Pass `gutter` a `[horizontal, vertical]` pair to space columns and rows apart on their own, like wide columns with tight rows.
- [Responsive gutter](https://ui.antuikit.com/embed/masonry/responsive-gutter.md): Pass `gutter` an object keyed by breakpoint to tighten the spacing on small screens and open it up on wide ones.
- [Adding and removing](https://ui.antuikit.com/embed/masonry/dynamic.md): Save the column `onLayoutChange` reports back onto each item as `column`, so adding or removing a task leaves the other cards where they are.
- [Fresh](https://ui.antuikit.com/embed/masonry/fresh.md): Set `fresh` to re-measure a card whenever its size changes, so opening an answer pushes the cards below it down instead of overlapping them.
- [Photo wall](https://ui.antuikit.com/embed/masonry/image-wall.md): A photo feed with crops of different heights, broken up by a sponsored card and a newsletter signup.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/masonry`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Masonry` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.