Masonry Examples
Copy-ready examples with live previews.
Basic usage (cols + gapScale)
Defines column count and spacing scale.
Live preview
Basic masonry
import Masonry from "@/packages/ui/src/_components/grid/masonry/Masonry";
export default function Example() {
return (
<Masonry cols={3} gapScale={4}>
<div className="cssnt-masonry__item">Card 1</div>
<div className="cssnt-masonry__item">Card 2</div>
<div className="cssnt-masonry__item">Card 3</div>
<div className="cssnt-masonry__item">Card 4</div>
</Masonry>
);
}Spacing preset (variants)
Use variants to switch between dense / normal / spacious spacing.
Live preview
variants
import Masonry from "@/packages/ui/src/_components/grid/masonry/Masonry";
export default function Example() {
return (
<Masonry cols={4} variants="spacious">
<div className="cssnt-masonry__item">Card 1</div>
<div className="cssnt-masonry__item">Card 2</div>
<div className="cssnt-masonry__item">Card 3</div>
<div className="cssnt-masonry__item">Card 4</div>
</Masonry>
);
}Priority (variants > gapScale)
When variants is provided, gapScale is not applied.
Live preview
variants wins over gapScale
import Masonry from "@/packages/ui/src/_components/grid/masonry/Masonry";
export default function Example() {
return (
<Masonry cols={3} variants="dense" gapScale={8}>
{/* gapScale is ignored because variants is set */}
<div className="cssnt-masonry__item">Card 1</div>
<div className="cssnt-masonry__item">Card 2</div>
<div className="cssnt-masonry__item">Card 3</div>
<div className="cssnt-masonry__item">Card 4</div>
</Masonry>
);
}Full width helper (isFull)
Adds an `is-full` helper class.
Live preview
isFull
import Masonry from "@/packages/ui/src/_components/grid/masonry/Masonry";
export default function Example() {
return (
<div style={{ maxWidth: 520 }}>
<Masonry cols={2} variants="dense" isFull>
<div className="cssnt-masonry__item">Item A</div>
<div className="cssnt-masonry__item">Item B</div>
</Masonry>
</div>
);
}Interactive playground
Quick way to test combinations in the docs (cols / variants / gapScale / isFull).
Live preview
Playground
import { useState } from "react";
import Masonry from "@/_components/grid/masonry/Masonry";
type MasonryVariants = "dense" | "normal" | "spacious" | undefined;
export default function Example() {
const [cols, setCols] = useState<1 | 2 | 3 | 4 | 5>(3);
const [variants, setVariants] = useState<MasonryVariants>(undefined);
const [gapScale, setGapScale] = useState<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>(4);
return (
<Masonry
cols={cols}
variants={variants}
gapScale={variants ? undefined : gapScale}
isFull
>
<div className="cssnt-masonry__item">Card 1</div>
<div className="cssnt-masonry__item">Card 2</div>
<div className="cssnt-masonry__item">Card 3</div>
</Masonry>
);
}On this page
Masonry Props
Lightweight masonry-like layout utility that composes CSS classes and renders a single <div> container.
Class composition order: base `cssnt-masonry` → cols → variants → gapScale (only when variants is not set) → `is-full` (when isFull=true).
If `variants` is provided, `gapScale` is ignored.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| cols | 1 | 2 | 3 | 4 | 5 | No | n/a | Number of masonry columns (`cssnt-masonry--cols-*`). (Values: 1, 2, 3, 4, 5) |
| variants | "dense" | "normal" | "spacious" | No | n/a | Spacing preset class (`cssnt-masonry--dense/normal/spacious`). When set, it takes priority over `gapScale`. (Values: dense, normal, spacious) |
| gapScale | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | No | n/a | Gap scale (`cssnt-masonry--gap-*`). Only applied when `variants` is not set. (Values: 0, 1, 2, 3, 4, 5, 6, 7, 8) |
| isFull | boolean | No | false | Adds `is-full` helper class. |
| children | React.ReactNode | No | n/a | Content inside the masonry container. |
| customStyles | React.CSSProperties | No | n/a | Inline styles for the root container (`style`). |
Components