Image gallery: Grid
Overview
The Image gallery section displays a grid of images in multiple columns. You can control the number of columns on desktop and mobile, the spacing between images, and the overall image ratio. The section also includes layout width controls, color scheme, optional scroll-fade animation, text alignment, and adjustable inner/outer padding. Images are added using image blocks, and the section supports theme and app blocks where available.
Section configuration:
Grid settings
| Setting | Description |
|---|---|
| Desktop columns | Sets how many images appear per row on desktop (up to 4). |
| Mobile columns | Sets how many images appear per row on mobile devices. |
| Gap | Controls the spacing between images in the gallery grid. |
Layout
| Setting | Description |
|---|---|
| Image ratio | Controls how images are proportioned in the grid (adapt, square, portrait, or landscape). |
| Container layout | Controls the section’s width style (for example, contained vs full-width depending on the option selected). |
| Container size | Sets the maximum desktop container width as a percentage. |
| Color scheme | Applies a color scheme to the section. |
| Scroll fade animation | Enables a subtle fade-in effect as the section scrolls into view. |
| Text alignment (desktop) | Sets the alignment of text content on desktop devices. |
| Text alignment (mobile) | Sets the alignment of text content on mobile devices. |
Inner padding
| Setting | Description |
|---|---|
| Top padding (desktop) | Adds space inside the section at the top on desktop. |
| Bottom padding (desktop) | Adds space inside the section at the bottom on desktop. |
| Left padding (desktop) | Adds space inside the section on the left on desktop. |
| Right padding (desktop) | Adds space inside the section on the right on desktop. |
| Top padding (mobile) | Adds space inside the section at the top on mobile. |
| Bottom padding (mobile) | Adds space inside the section at the bottom on mobile. |
| Left padding (mobile) | Adds space inside the section on the left on mobile. |
| Right padding (mobile) | Adds space inside the section on the right on mobile. |
Outer padding
| Setting | Description |
|---|---|
| Top padding (desktop) | Adds space outside the section at the top on desktop. |
| Bottom padding (desktop) | Adds space outside the section at the bottom on desktop. |
| Left padding (desktop) | Adds space outside the section on the left on desktop. |
| Right padding (desktop) | Adds space outside the section on the right on desktop. |
| Top padding (mobile) | Adds space outside the section at the top on mobile. |
| Bottom padding (mobile) | Adds space outside the section at the bottom on mobile. |
| Left padding (mobile) | Adds space outside the section on the left on mobile. |
| Right padding (mobile) | Adds space outside the section on the right on mobile. |