Masonry
Items of different heights packed into balanced columns.
Identity, site and launch kit for the harbour trust.
Offline tasks and a quiet inbox for the crew.
Twelve calls, one clear pattern.
Shifts out to payroll without the spreadsheet.
Wayfinding for the three northern depots.
Twelve calls, one clear pattern.
Identity, site and launch kit for the harbour trust.
Shifts out to payroll without the spreadsheet.
Offline tasks and a quiet inbox for the crew.
Identity, site and launch kit for the harbour trust.
Offline tasks and a quiet inbox for the crew.
Twelve calls, one clear pattern.
Shifts out to payroll without the spreadsheet.
Identity, site and launch kit for the harbour trust.
Twelve calls, one clear pattern.
Shifts out to payroll without the spreadsheet.
Wayfinding for the three northern depots.
In context
Props
| Prop | Type | Required | Default |
|---|---|---|---|
columns | number | undefined | No | 3 |
gap | number | undefined | No | 16 |
data-rebar-* attributes
data-rebar-component="masonry" on the root; each item wrapper carries data-rebar-part="item".
Migrating to Ant Design
AntD has no direct built-in equivalent (MUI's Masonry is the closer match) — on migration, keep the same CSS-columns technique directly, or swap to react-masonry-css if column-balancing needs to be exact.