# Masonry Grid

Pinterest-style masonry grid for images with responsive columns, hover zoom effect, and lightbox modal. Supports tall, wide, and normal image spans. Uses motion/react for smooth animations.

## Files

| Target | Type |
|--------|------|
| `$modules$/masonry-grid/index.ts` | index |
| `$modules$/masonry-grid/masonry-grid.tsx` | block |
| `$modules$/masonry-grid/lang/en.json` | lang |
| `$modules$/masonry-grid/lang/tr.json` | lang |
| `$modules$/masonry-grid/lang/pt.json` | lang |

## Exports

**Components/Functions:** `MasonryGrid`

```typescript
import { MasonryGrid } from '@/modules/masonry-grid';
```

## Usage

```
import { MasonryGrid } from '@/modules/masonry-grid';

const images = [
  { id: '1', src: '/img1.jpg', alt: 'Image 1', span: 'tall' },
  { id: '2', src: '/img2.jpg', alt: 'Image 2', span: 'normal' },
];

<MasonryGrid items={images} columns={3} />

• Spans: tall, wide, normal
• Columns: 2, 3, or 4
• Click to open lightbox
```
