docs/features/photo-grids.mdx

---
title: "Photo Grids"
description: "Create beautiful image layouts with 24 pre-designed templates"
---

# Photo Grids

Insert stunning image galleries with professional layouts directly in your content.

## Overview

Photo grids allow you to display multiple images in visually appealing arrangements. Choose from 24 pre-designed layouts to showcase your work.

## Inserting a Photo Grid

<Steps>
  <Step title="Open Editor">
    Go to any content editor (Blog, Project, Product)
  </Step>
  <Step title="Click Grid Button">
    Click the **Grid** icon (Grid3x3) in the toolbar
  </Step>
  <Step title="Choose Layout">
    Browse 24 layout options and click your preferred one
  </Step>
  <Step title="Add Images">
    For each cell:
    1. Click the empty cell
    2. Choose **URL** or **Upload**
    3. Add your image
    4. Click **Add Image**
  </Step>
  <Step title="Insert">
    Click **Insert Grid** when all cells are filled
  </Step>
</Steps>

## Available Layouts

### Simple Grids (1-5)

| Layout | Description | Images |
|--------|-------------|--------|
| 2 Columns | Side by side | 2 |
| 3 Columns | Three in a row | 3 |
| 4 Columns | Four in a row | 4 |
| 2×2 Grid | Square grid | 4 |
| 3×2 Grid | Two rows of three | 6 |

**Best for:** Simple galleries, before/after comparisons, product showcases

### Asymmetric Layouts (6-10)

| Layout | Description | Images |
|--------|-------------|--------|
| Large Left + 2 Right | Featured image on left | 3 |
| Large Right + 2 Left | Featured image on right | 3 |
| 2 Top + 3 Bottom | Wide top, small bottom | 5 |
| 3 Top + 2 Bottom | Small top, wide bottom | 5 |
| Large Center + 4 Corners | Center focus | 5 |

**Best for:** Highlighting a main image with supporting images

### Creative Layouts (11-15)

| Layout | Description | Images |
|--------|-------------|--------|
| Masonry 1 | Tall images on sides | 4-6 |
| Masonry 2 | Alternating heights | 4-6 |
| Featured + 3 | One large, three small | 4 |
| Split + 4 | Two large top, 4 small bottom | 6 |
| Showcase | Alternating sizes | 5 |

**Best for:** Portfolio showcases, creative presentations

### Gallery Layouts (16-20)

| Layout | Description | Images |
|--------|-------------|--------|
| Gallery 1 | Tall left, wide right | 4 |
| Gallery 2 | Large square with small images | 5 |
| Portfolio 1 | Wide top, tall right | 4 |
| Portfolio 2 | Mixed sizes | 5 |
| Magazine | Editorial style | 5 |

**Best for:** Professional portfolios, editorial content

### Special Layouts (21-24)

| Layout | Description | Images |
|--------|-------------|--------|
| Hero + Grid | Hero image with thumbnails | 5 |
| Spotlight | Wide feature with small images | 4 |
| Collage 1 | Artistic arrangement | 5 |
| Collage 2 | Creative mixed layout | 6 |

**Best for:** Hero sections, artistic presentations

## Editing Photo Grids

### Change Images

1. Hover over the grid in the editor
2. Click **Settings** icon (gear)
3. Click on the image you want to change
4. Upload or enter new image URL
5. Click **Update Grid**

### Change Layout

1. Click **Settings** on the grid
2. Click **Change Layout**
3. Select new layout
4. Rearrange images if needed
5. Click **Update Grid**

### Delete Grid

1. Hover over the grid
2. Click **Delete** icon (trash)
3. Confirm deletion

## Image Recommendations

### Optimal Sizes

| Use Case | Recommended Size |
|----------|------------------|
| Thumbnail cells | 400×400px |
| Wide cells | 800×400px |
| Tall cells | 400×800px |
| Hero/Large cells | 1200×800px |

### File Formats

| Format | Best For |
|--------|----------|
| JPG | Photos, complex images |
| PNG | Graphics, transparency |
| WebP | Best compression (modern browsers) |

### Tips for Best Results

<Tip>
  Use images with similar color tones for a cohesive look.
</Tip>

<Tip>
  Keep file sizes under 500KB per image for faster loading.
</Tip>

<Tip>
  Use consistent aspect ratios within the same grid when possible.
</Tip>

<Warning>
  Very large images (>2MB) will slow down page loading. Compress before uploading.
</Warning>

## Use Cases

### Portfolio Showcase

Use **Gallery** or **Portfolio** layouts to display your best work with a featured piece.

```
┌─────────────────┬─────────┐
│                 │    2    │
│       1         ├─────────┤
│   (Featured)    │    3    │
│                 ├─────────┤
│                 │    4    │
└─────────────────┴─────────┘
```

### Product Gallery

Use **2×2 Grid** or **3 Columns** for product photos from different angles.

```
┌─────────┬─────────┬─────────┐
│    1    │    2    │    3    │
└─────────┴─────────┴─────────┘
```

### Before/After

Use **2 Columns** for side-by-side comparisons.

```
┌─────────────┬─────────────┐
│   Before    │    After    │
└─────────────┴─────────────┘
```

### Photo Essay

Use **Magazine** or **Collage** layouts for storytelling.

```
┌─────────────────────────────┐
│            Hero             │
├─────────┬─────────┬─────────┤
│    2    │    3    │    4    │
└─────────┴─────────┴─────────┘
```

## Responsive Behavior

All photo grids are automatically responsive:

| Screen Size | Behavior |
|-------------|----------|
| Desktop | Full grid layout |
| Tablet | Adjusted spacing, some stacking |
| Mobile | Stacked or simplified layout |

<Note>
  Complex layouts may simplify on mobile devices for better viewing experience.
</Note>

## Troubleshooting

### Grid Not Appearing

1. Ensure you clicked **Insert Grid** after adding images
2. Check that all cells have images
3. Refresh the editor

### Images Not Loading

1. Verify image URLs are correct and accessible
2. Check file upload completed successfully
3. Ensure images are publicly accessible

### Layout Looks Wrong

1. Check image aspect ratios match the cell shapes
2. Try a different layout better suited to your images
3. Ensure all cells are filled