"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface MasonryGridProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Number of columns */
  columns?: number;
  /** Gap between items (in pixels) */
  gap?: number;
  /** Children to render in masonry layout */
  children: React.ReactNode;
}

export interface MasonryItemProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
}

/**
 * Individual item wrapper for the masonry grid.
 * Prevents column breaks within items.
 */
function MasonryItem({ className, children, ...props }: MasonryItemProps) {
  return (
    <div
      className={cn("break-inside-avoid", className)}
      {...props}
    >
      {children}
    </div>
  );
}

/**
 * Pinterest-style masonry layout using CSS columns.
 * Items flow top to bottom, then left to right.
 */
function MasonryGrid({
  columns = 3,
  gap = 16,
  className,
  children,
  ...props
}: MasonryGridProps) {
  return (
    <div
      className={cn("w-full", className)}
      style={{
        columnCount: columns,
        columnGap: gap,
      }}
      {...props}
    >
      {React.Children.map(children, (child, index) => (
        <div
          key={index}
          className="break-inside-avoid"
          style={{ marginBottom: gap }}
        >
          {child}
        </div>
      ))}
    </div>
  );
}

export { MasonryGrid, MasonryItem };
Masonry Grid

Dependencies

Files

Installation
