Overview
A responsive, performant masonry layout using CSS multi-columns. This ensures items of varying heights fit perfectly without awkward gaps, avoiding the heavy JavaScript calculations of traditional masonry libraries.
Usage
import { MasonryGrid } from "@/components/creative/masonry-grid"
<MasonryGrid
columnWidth={250}
gap={4}
animate={true}
>
<img src="/tall.jpg" alt="" />
<img src="/short.jpg" alt="" />
<img src="/medium.jpg" alt="" />
{/* More items */}
</MasonryGrid>
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { MasonryGrid } from "@/components/creative/masonry-grid";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { MasonryGrid } from "@/components/creative/masonry-grid";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<MasonryGrid
columnWidth="example"
gap{10}
animate{true}
>
<div>Content goes here</div>
</MasonryGrid>
</div>
);
}