Masonry Grid

Galleries 207

About

Masonry Grid A responsive, animated, and customizable masonry grid layout component, perfect for displaying items of varying heights in a visually appealing way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Masonry Grid to your project and fits it to your theme.

Code

How Masonry Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import React from 'react';
import MasonryGrid from '@/components/ui/masonry-grid'; // Adjust path as needed

// Sample data for the demo
const galleryItems = [
  { id: 1, src: 'https://cdn.21st.dev/assets/mirror/a1/a148642541eeca82568516e5d0abd4642d3ee08e6f319324a842be5cac2ef51f.jpg' },
  { id: 2, src: 'https://cdn.21st.dev/assets/mirror/72/7248fd4bde958a211d18bec239b8341e1f0a4cd95201fbfd341452493830d92d.jpg' },
  { id: 3, src: 'https://cdn.21st.dev/assets/mirror/d9/d9ddac5071118ec39cc2c6ae27f24834eb13df2bd8d8b1a127a2cd1c1e0bc468.jpg' },
  { id: 4, src: 'https://cdn.21st.dev/assets/mirror/17/17a1fc44c9398efc3f0e471c2567867bffa6f28e8a13e4ad0198a82c02cdb13e.jpg' },
  { id: 5, src: 'https://cdn.21st.dev/assets/mirror/f9/f947eaa95ca6e83397027ee7fdca5bbe64e0ba016afc0b26003d1ee98a906832.jpg' },
  { id: 6, src: 'https://cdn.21st.dev/assets/mirror/ec/ece951b6406474d6eaba242b58e3c42c5098392ee59cb6fd71b9846b714e5f61.jpg' },
  { id: 7, src: 'https://cdn.21st.dev/assets/mirror/51/5193aa5f704f5373658454ce573c9f573bcee7bed81c25177add77dd9dc51ef0.jpg' },
  { id: 8, src: 'https://cdn.21st.dev/assets/mirror/16/1603c404a238ec597b7127617a7a43173c51fdc764de3c68c9ff655dd0cf9fae.jpg' },
  { id: 9, src: 'https://cdn.21st.dev/assets/mirror/dd/dd2af049bc05111abdf961341fa2c94109cf6104b7b971085039f784b4f4e68c.jpg' },
  { id: 10, src: 'https://cdn.21st.dev/assets/mirror/d1/d189ac08ee89c4464a97f07b3d50bb9192df880653394d2e2c6f558af73b9594.jpg' },
  { id: 11, src: 'https://cdn.21st.dev/assets/mirror/ba/ba250674e9841a24f4baddc17f99f01ef95972c7a33d411a2fd0dd97c4d8c5d9.jpg' },
  { id: 12, src: 'https://cdn.21st.dev/assets/mirror/15/1564ca5498bb4e8aa3af8045fdecb2d33b79f0669038ed7db4a8944cc2de1fab.jpg' },
  { id: 13, src: 'https://cdn.21st.dev/assets/mirror/8f/8ff9e4681f12cdb14e258d27b9e1be0348bc61849b06864065f046138624a18c.jpg' },
  { id: 8, src: 'https://cdn.21st.dev/assets/mirror/12/12d71f6d041b535df7dd2b8201280d56b09ed0410e7ca9082d16d17a64db75b6.jpg' },
  { id: 9, src: 'https://cdn.21st.dev/assets/mirror/93/93da44541d822ae424bc321d7b6f4b273cfe47c7532eab3c6b6617c5811541c5.jpg' },
  { id: 10, src: 'https://cdn.21st.dev/assets/mirror/90/90a9a76192a8afc3e1daca9f6f1610b948f99c1636fb314233a3c87284874b33.jpg' },
  { id: 11, src: 'https://cdn.21st.dev/assets/mirror/e7/e76535738655382fb613a88aed88929bd21b7f9d9e2427cd609726fc3a7ccf4d.jpg' },
  { id: 12, src: 'https://cdn.21st.dev/assets/mirror/3d/3dd1f110c29b235ebd306e570f034157d58d085fe20ce5b0017d159f21423f72.jpg' },
  { id: 13, src: 'https://cdn.21st.dev/assets/mirror/14/14129c6140df42c102a3bbf775a9e35938aa434cdc024bd26c2e3196cf7fa0a3.jpg' }
];

const MasonryGridDemo = () => {
  return (
    <div className="w-full min-h-screen bg-background p-4 sm:p-6 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="text-3xl md:text-5xl font-bold text-foreground mb-2">
            Inspiration Gallery
          </h1>
          <p className="text-lg text-muted-foreground">
            A showcase of nature's beauty
          </p>
        </div>

        <MasonryGrid
          items={galleryItems}
          // Responsive columns controlled by Tailwind classes
          className="columns-1 sm:columns-2 lg:columns-3 xl:columns-4"
          gap="1rem"
          renderItem={(item) => (
            <div className="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out bg-card">
              <img
                src={item.src}
                alt={`Gallery item ${item.id}`}
                className="w-full h-auto object-cover"
                loading="lazy"
              />
            </div>
          )}
        />
      </div>
    </div>
  );
};

export default MasonryGridDemo;