typescriptintermediate

Masonry Grid Component

CSS-based masonry layout component with configurable columns and responsive breakpoints.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { ReactNode, useMemo } from 'react';

interface MasonryProps {
  children: ReactNode[];
  columns?: number;
  gap?: number;
}

export function MasonryGrid({ children, columns = 3, gap = 16 }: MasonryProps) {
  const columnItems = useMemo(() => {
    const cols: ReactNode[][] = Array.from({ length: columns }, () => []);
    children.forEach((child, i) => {
      cols[i % columns].push(child);
    });
    return cols;
  }, [children, columns]);

  return (
    <div className="flex" style={{ gap }}>
      {columnItems.map((col, i) => (
        <div key={i} className="flex-1 flex flex-col" style={{ gap }}>
          {col}
        </div>
      ))}
    </div>
  );
}

// Usage:
// <MasonryGrid columns={3}>
//   {items.map(item => <Card key={item.id} {...item} />)}
// </MasonryGrid>