Masonry

Masonry is the smallest layout mode. Use it when every item can render up front and you do not need Masonix to measure item heights.

New

Furniture

Linen lounge chair

$420

Rating 4.8 / 5.0

Low stock

Lighting

Halo task lamp

$148

Rating 4.9 / 5.0

Bundle

Workspace

Ceramic desk set

$86

Rating 4.7 / 5.0

Popular

Travel

Canvas weekend bag

$196

Rating 4.6 / 5.0

Gift pick

Home

Soft wool throw

$112

Rating 4.9 / 5.0

Limited

Decor

Frosted glass vase

$74

Rating 4.8 / 5.0

When to use

Product grids, profile grids, link collections, and simple galleries.
Layouts where source order should remain visually straightforward.
Pages where all items are cheap enough to render.

Basic usage

import { Masonry } from 'masonix';

type Product = {
  id: string;
  name: string;
  category: string;
  price: string;
  rating: string;
  badge: string;
  gradient: string;
  height: number;
};

function ProductCard({ product }: { product: Product }) {
  return (
    <article className="overflow-hidden rounded-xl border bg-white">
      <div
        className="relative"
        style={{ height: product.height, background: product.gradient }}
      >
        <span className="absolute left-3 top-3 rounded-full bg-white/85 px-2 py-1 text-xs font-medium text-zinc-900">
          {product.badge}
        </span>
      </div>
      <div className="p-4">
        <div className="flex items-start justify-between gap-3">
          <div>
            <p className="text-xs text-zinc-500">{product.category}</p>
            <h3 className="mt-1 text-sm font-semibold">{product.name}</h3>
          </div>
          <span className="shrink-0 text-sm font-semibold">
            {product.price}
          </span>
        </div>
        <p className="mt-3 text-xs text-zinc-500">
          Rating {product.rating} / 5.0
        </p>
      </div>
    </article>
  );
}

export function ProductGrid({ products }: { products: Product[] }) {
  return (
    <Masonry
      items={products}
      columnWidth={180}
      maxColumns={3}
      gap={16}
      itemKey={(product) => product.id}
      render={({ data }) => <ProductCard product={data} />}
    />
  );
}

Responsive columns

<Masonry
  items={items}
  columns={{ 0: 1, 720: 2, 1080: 3, 1320: 4 }}
  gap={{ 0: 10, 720: 14, 1080: 18 }}
  render={({ data }) => <Card item={data} />}
/>

Use columns when design requires exact counts. Use columnWidth when cards should keep a minimum width and Masonix can decide how many columns fit.

Native CSS masonry

enableNative lets Masonix use native CSS masonry when the browser supports it. Unsupported browsers continue using the regular Masonix layout.

<Masonry
  enableNative
  items={items}
  columns={3}
  gap={16}
  render={({ data }) => <Card item={data} />}
/>

Common mistakes

Do not use Masonry for very large feeds where the DOM cost is the problem.
Do not expect shortest-column balancing; use MasonryBalanced for that.
Do not omit itemKey when items can filter, shuffle, or reorder.