---
title: "Gallery Layout"
description: "Moment Ghost theme galleries use Grid, Masonry or Interactive Links layouts, with Gallery columns, scroll effects, reveal animations and hover effects."
url: "https://www.priority.vision/docs/moment/settings-sitewide/gallery-layout"
scope: theme
appliesTo: [Moment]
lastUpdated: 2026-10-21
---

# Gallery Layout & Effects

Moment theme offers multiple gallery layouts and customizable effects to showcase your images beautifully. Choose from grid-based layouts, masonry styles, or interactive designs, each with their own visual effects and animation options.

## Gallery Layout

1. Go to **Settings → Site → Design & branding**
1. Click **Customize → Theme → Site wide**
1. Select your preferred **Gallery layout** from the dropdown menu

### Grid

![Grid gallery layout](https://www.priority.vision/images/docs/moment/settings-gallery-layout-grid.png)

A clean, organized grid layout that displays images in equal-sized cards with consistent spacing between them. Perfect for portfolios and uniform image collections.

### Masonry

![Masonry gallery layout](https://www.priority.vision/images/docs/moment/settings-gallery-layout-masonry.png)

A dynamic Pinterest-style layout where images are arranged in columns based on their natural dimensions. Taller images stack vertically while maintaining optimal spacing, creating an organic, flowing appearance.

### Interactive Links

![Interactive links gallery layout](https://www.priority.vision/images/docs/moment/settings-gallery-layout-interactive-links.png)

A unique layout featuring clickable text links with images that appear as background elements when you hover over each link. This creates an engaging, interactive browsing experience.

## Gallery Columns

Control the number of columns displayed in your Grid and Masonry layouts to optimize viewing on different screen sizes:

1. Go to **Settings → Site → Design & branding**
1. Click **Customize → Theme → Site wide**
1. Choose your preferred number of columns in **Gallery columns** setting

   The column count automatically adjusts on smaller screens to maintain optimal readability and visual balance.

## Scroll Effects

Enhance user experience with subtle scroll-based animations (available for Grid and Masonry layouts):

1. Go to **Settings → Site → Design & branding**
1. Click **Customize → Theme → Site wide**
1. Choose your preferred effect in **Gallery scroll effect** setting

![Shift gallery scroll effect](https://www.priority.vision/images/docs/moment/settings-gallery-scroll-effects.png)

Available scroll effects:

- **None** - Static gallery with no scroll animations
- **Shift** - Images gently shift left and right alternately as you scroll
- **Shift Start** - All images shift towards the left side during scroll
- **Shift End** - All images shift towards the right side during scroll

## Gallery Reveal Effects

Create engaging entrance animations that trigger when images scroll into the viewport (available for Grid, Masonry, Horizontal, and Photo Film layouts):

1. Go to **Settings → Site → Design & branding**
1. Click **Customize → Theme → Site wide**
1. Choose your animation in **Gallery reveal** setting

![Shift gallery reveal effect](https://www.priority.vision/images/docs/moment/settings-gallery-reveal-effects.png)

Available reveal effects:

- **Basic Animations**: None, Fade (opacity change), Shift (slide movement), Zoom (scale effect), Slide (directional entrance)
- **Advanced Animations**: Flip effects (3D rotations), Clip animations (geometric reveals), and directional variants
- **Scroll-Based Variants**: Enhanced versions triggered by scroll position (Scroll Fade, Scroll Shift, etc.)

## Interactive Links Effects

Customize how background images respond when visitors hover over links in the Interactive Links layout:

1. Go to **Settings → Site → Design & branding**
1. Click **Customize → Theme → Site wide**
1. Choose your hover animation in **Gallery links effect** setting

Available hover effects:

- **Fade** - Images smoothly fade in and out during hover transitions
- **Zoom** - Images gradually scale up when hovered, creating a subtle zoom effect

## Custom Gallery Spacing

   [Code Injection](/docs/guides/custom-code-injection/) is required to add custom CSS.

Fine-tune the spacing between gallery images by overriding the default gap values with custom CSS variables:

```html
<style>
   :root {
      --gallery--gap-v: 8px;  /* Vertical spacing between rows */
      --gallery--gap-h: 8px;  /* Horizontal spacing between columns */
   }
</style>
```

Adjust the pixel values to increase or decrease spacing as needed. For example, use `16px` for wider gaps or `4px` for tighter spacing.

## Documentation Index
> Fetch the complete documentation index at: https://www.priority.vision/docs/moment/llms.txt
> Use this file to discover all available pages before exploring further.