A flexible grid layout component for rendering collections of items with configurable columns and spacing.

interface ItemGridProps<T> {
  items: T[];                                    // Array of items to render
  columns?: 2 | 3 | 4 | 6;                       // Grid columns (default: 3)
  gap?: 2 | 4 | 6 | 8;                           // Gap between items
  showLabels?: boolean;                          // Show item labels
  renderItem: (item: T, index: number) => ReactNode;  // Render function
  emptyState?: ReactNode;                        // Shown when items is empty
  className?: string;                            // Additional classes
}

// Basic usage
<ItemGrid
  items={posts}
  columns={3}
  gap={4}
  renderItem={(post) => <PostWidget post={post} />}
/>

// With empty state
<ItemGrid
  items={[]}
  emptyState={<p>No items found</p>}
  renderItem={(item) => <Card {...item} />}
/>

// Custom styling
<ItemGrid
  items={users}
  columns={4}
  gap={2}
  className="p-4 bg-muted rounded-lg"
  renderItem={(user) => <UserAvatar user={user} />}
/>

Related Components