Display

Masonry

Server Component

A responsive CSS multi-column masonry layout for cards and images.

Import

tsx

import { Masonry } from "@cronus-ui/ui";

bash

npx cronus-ui add masonry

Examples

Responsive cards

A pure CSS multi-column layout that flows items top-to-bottom, balancing columns regardless of card height. `columns` takes a responsive map and `gap` controls both axes — no JS measurement, no layout shift.

Onboarding

Passwordless email code, ready in seconds.

Checkout

Card and boleto with a builder-driven layout, custom tracking scripts, and upsells that convert.

Payouts

Settled on a fixed schedule.

Analytics

Live revenue, conversion and refund metrics rolled up per product and per day.

Members

Grant and revoke course access automatically.

Notifications

Push and email on every sale.

tsx

const cards = [
  { id: "m-1", title: "Onboarding", body: "Passwordless email code." },
  { id: "m-2", title: "Checkout", body: "Card and boleto with upsells that convert." },
  { id: "m-3", title: "Payouts", body: "Settled on a fixed schedule." },
  { id: "m-4", title: "Analytics", body: "Live revenue and conversion metrics." },
  { id: "m-5", title: "Members", body: "Grant and revoke access automatically." },
  { id: "m-6", title: "Notifications", body: "Push and email on every sale." },
];

return (
  <Masonry columns={{ base: 1, sm: 2, lg: 3 }} gap="1rem">
    {cards.map((card) => (
      <Card key={card.id}>
        <CardHeader>
          <CardTitle>{card.title}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-fg-secondary">{card.body}</p>
        </CardContent>
      </Card>
    ))}
  </Masonry>
);

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component MasonryDefault layout:inline style:masonry {
  aria-label:"Gallery"
  label "Gallery"
  text "Alpha"
  text "Beta"
  text "Gamma"
  text "Delta"
}

page "/audit/masonry/default" type:custom {
  use MasonryDefault
}

API Reference

Generated from the component's exported types.

MasonryProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`columns`	`number \| MasonryColumns`	`DEFAULT_COLUMNS`	Number of columns, either a fixed count or a responsive map keyed by breakpoint.
`gap`	`string`	`"1rem"`	CSS length used for both the column gap and the vertical gap between items.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.