Masonry Grid

A high-performance masonry layout that tightly packs items of varying heights. Rather than relying on heavy JavaScript calculations or absolute positioning frameworks, this component utilizes standard CSS multi-column layout (columns-N) to flow items naturally.

This premium iteration includes hardware-accelerated blur-fade entrances, layout animations for dynamic content reflows, and a scroll-triggered entrance sequence for high-end aesthetic presentation. It ships as a GSAP build and a Motion build with the same motion.

The layout is plain CSS multi-column, so reflow is the browser's job and resizing is free — drag a preview's width handle to watch the columns recalculate.

Masonry grid

The grid never measures anything — it flows your tiles through CSS columns.

Passitems: as an array where each entry has a unique id for layout tracking.
renderItem: receives (item, index) and returns the tile element.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Masonry Grid

npx shadcn@latest add @algorize-ui/masonry-grid

components/custom/blocks/MasonryGridBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Masonry Grid to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Examples

Column counts

columnsClassName: takes the raw Tailwind columns-* utilities, one per breakpoint — it is a class string, not a number.

Custom gap spacing

gapClassName"gap-6": sets uniform spacing between tiles. The same value is converted to a matching mb-* for the vertical axis, so both directions stay in step.

Slower stagger

staggerDelay{0.25}: is the delay in seconds between each tile's blur-fade. Defaults to 0.08.

Without the entrance

SetanimateIn{false}: to render tiles in place with no motion — right for content already above the fold, or when you handle reduced-motion yourself.

Features

Discover the Masonry Grid's dynamic layout features, seamlessly arranging varying-height elements without large vertical gaps.

Pure CSS Layout

Uses standard CSS multi-column layouts rather than heavy JavaScript absolute positioning to pack items perfectly.

Headless Design

Total control over your UI. Just pass the raw data and a render function, and the grid handles the complex layout.

Staggered Entrances

Apple-style staggered blur-fade entrances on scroll, in a GSAP build and a Motion build that move the same way.

Fluid Resizing

Automatically reflows into the correct number of columns using Tailwind responsive utility classes.

Best Practices & Guidelines

Break-Inside-Avoid

Because CSS columns natively try to break content across columns, it is crucial that the wrapper div of your rendered item has break-inside: avoid (in Tailwind: break-inside-avoid). The headless component handles this on the outer container, but keep this in mind if you add complex nested layouts.

Props Reference

Prop	Type	Default	Description
`items`	`T[]`	Required	An array of generic objects representing your data. Each item must contain a unique `id` for layout tracking.
`renderItem`	`(item: T, index: number) => ReactNode`	Required	A function that receives the data item and its index, returning the React element to display.
`columnsClassName`	`string`	`"columns-1 sm:columns-2 md:columns-3 lg:columns-4"`	The Tailwind `columns-*` utilities, one per breakpoint. It is a raw class string rather than a number, so every breakpoint is yours to set.
`gapClassName`	`string`	`"gap-6"`	Tailwind CSS gap utility. Applied horizontally to the flex container and vertically to the columns.
`animateIn`	`boolean`	`true`	Toggles the staggered, hardware-accelerated blur-fade entrance sequence.
`staggerDelay`	`number`	`0.08`	The time (in seconds) to delay the entrance animation of each sequential item.
`className`	`string`	`undefined`	Standard Tailwind classes applied to the outermost wrapper element.
`...props`	`HTMLAttributes`	`undefined`	Accepts all standard HTML `<div>` attributes, excluding `children`. The Motion build also takes Motion props (`HTMLMotionProps`).