Gallery

Multi-image container with grid, carousel, or masonry layout and optional lightbox overlay.

Basic grid gallery

Images are displayed in a responsive grid by default.

{% gallery %}
![Mountain sunrise](https://picsum.photos/seed/sunrise/600/400)
![Forest path](https://picsum.photos/seed/forest/600/400)
![Ocean waves](https://picsum.photos/seed/ocean/600/400)
![Desert dunes](https://picsum.photos/seed/desert/600/400)
![Snowy peaks](https://picsum.photos/seed/peaks/600/400)
![River valley](https://picsum.photos/seed/valley/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;true&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/sunrise/600/400" alt="Mountain sunrise">
      <figcaption>Mountain sunrise</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/forest/600/400" alt="Forest path">
      <figcaption>Forest path</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/ocean/600/400" alt="Ocean waves">
      <figcaption>Ocean waves</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/desert/600/400" alt="Desert dunes">
      <figcaption>Desert dunes</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/peaks/600/400" alt="Snowy peaks">
      <figcaption>Snowy peaks</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/valley/600/400" alt="River valley">
      <figcaption>River valley</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="true" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/sunrise/600/400" alt="Mountain sunrise" />
      <figcaption>Mountain sunrise</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/forest/600/400" alt="Forest path" />
      <figcaption>Forest path</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/ocean/600/400" alt="Ocean waves" />
      <figcaption>Ocean waves</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/desert/600/400" alt="Desert dunes" />
      <figcaption>Desert dunes</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/peaks/600/400" alt="Snowy peaks" />
      <figcaption>Snowy peaks</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/valley/600/400" alt="River valley" />
      <figcaption>River valley</figcaption>
    </figure>
  </div>
</figure>

Carousel layout

Horizontal scrolling with snap points and prev/next navigation.

{% gallery layout="carousel" %}
![Coastal cliffs](https://picsum.photos/seed/cliffs/600/400)
![Autumn leaves](https://picsum.photos/seed/autumn/600/400)
![Starry night](https://picsum.photos/seed/stars/600/400)
![Rolling hills](https://picsum.photos/seed/hills/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;carousel&quot;,&quot;lightbox&quot;:&quot;true&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/cliffs/600/400" alt="Coastal cliffs">
      <figcaption>Coastal cliffs</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/autumn/600/400" alt="Autumn leaves">
      <figcaption>Autumn leaves</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/stars/600/400" alt="Starry night">
      <figcaption>Starry night</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/hills/600/400" alt="Rolling hills">
      <figcaption>Rolling hills</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--carousel" data-layout="carousel" data-lightbox="true" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/cliffs/600/400" alt="Coastal cliffs" />
      <figcaption>Coastal cliffs</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/autumn/600/400" alt="Autumn leaves" />
      <figcaption>Autumn leaves</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/stars/600/400" alt="Starry night" />
      <figcaption>Starry night</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/hills/600/400" alt="Rolling hills" />
      <figcaption>Rolling hills</figcaption>
    </figure>
  </div>
</figure>

Masonry layout

Variable-height items arranged in CSS multi-column flow — each image keeps its natural aspect ratio and stacks down its column.

{% gallery layout="masonry" columns=2 %}
![Tall waterfall](https://picsum.photos/seed/waterfall/600/800)
![Wide panorama](https://picsum.photos/seed/panorama/800/400)
![Square garden](https://picsum.photos/seed/garden/500/500)
![Tall canyon](https://picsum.photos/seed/canyon/600/800)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;masonry&quot;,&quot;lightbox&quot;:&quot;true&quot;,&quot;columns&quot;:&quot;2&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/waterfall/600/800" alt="Tall waterfall">
      <figcaption>Tall waterfall</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/panorama/800/400" alt="Wide panorama">
      <figcaption>Wide panorama</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/garden/500/500" alt="Square garden">
      <figcaption>Square garden</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/canyon/600/800" alt="Tall canyon">
      <figcaption>Tall canyon</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--masonry" data-layout="masonry" data-lightbox="true" data-columns="2" data-rune="gallery" data-density="full" style="--gallery-columns: 2">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/waterfall/600/800" alt="Tall waterfall" />
      <figcaption>Tall waterfall</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/panorama/800/400" alt="Wide panorama" />
      <figcaption>Wide panorama</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/garden/500/500" alt="Square garden" />
      <figcaption>Square garden</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/canyon/600/800" alt="Tall canyon" />
      <figcaption>Tall canyon</figcaption>
    </figure>
  </div>
</figure>

Disable the click-to-enlarge overlay.

{% gallery lightbox=false %}
![Lakeside cabin](https://picsum.photos/seed/cabin/600/400)
![Wildflower meadow](https://picsum.photos/seed/meadow/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;false&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/cabin/600/400" alt="Lakeside cabin">
      <figcaption>Lakeside cabin</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/meadow/600/400" alt="Wildflower meadow">
      <figcaption>Wildflower meadow</figcaption>
    </figure>
  </div>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="false" data-rune="gallery" data-density="full">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/cabin/600/400" alt="Lakeside cabin" />
      <figcaption>Lakeside cabin</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/meadow/600/400" alt="Wildflower meadow" />
      <figcaption>Wildflower meadow</figcaption>
    </figure>
  </div>
</figure>

Custom columns

Choose how many columns the grid uses — that's the one knob authors control for layout density. Spacing between items is theme-locked to keep the tile mosaic consistent across galleries; override --rf-gallery-gap (or --rf-gallery-edge for the outer frame) at the theme level if you need to retune.

{% gallery columns=2 caption="Vacation highlights" %}
![Sandy beach](https://picsum.photos/seed/beach/600/400)
![Golden sunset](https://picsum.photos/seed/sunset/600/400)
![Local market](https://picsum.photos/seed/market/600/400)
![Ancient temple](https://picsum.photos/seed/temple/600/400)
{% /gallery %}

<figure data-rune="gallery" typeof="ImageGallery" data-rune-fields="{&quot;layout&quot;:&quot;grid&quot;,&quot;lightbox&quot;:&quot;true&quot;,&quot;columns&quot;:&quot;2&quot;}">
  <div data-name="items">
    <figure data-name="item">
      <img src="https://picsum.photos/seed/beach/600/400" alt="Sandy beach">
      <figcaption>Sandy beach</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/sunset/600/400" alt="Golden sunset">
      <figcaption>Golden sunset</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/market/600/400" alt="Local market">
      <figcaption>Local market</figcaption>
    </figure>
    <figure data-name="item">
      <img src="https://picsum.photos/seed/temple/600/400" alt="Ancient temple">
      <figcaption>Ancient temple</figcaption>
    </figure>
  </div>
  <figcaption data-field="caption">Vacation highlights</figcaption>
</figure>

<figure typeof="ImageGallery" class="rf-gallery rf-gallery--grid" data-layout="grid" data-lightbox="true" data-columns="2" data-rune="gallery" data-density="full" style="--gallery-columns: 2">
  <div data-name="items" class="rf-gallery__items">
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/beach/600/400" alt="Sandy beach" />
      <figcaption>Sandy beach</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/sunset/600/400" alt="Golden sunset" />
      <figcaption>Golden sunset</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/market/600/400" alt="Local market" />
      <figcaption>Local market</figcaption>
    </figure>
    <figure data-name="item" class="rf-gallery__item">
      <img src="https://picsum.photos/seed/temple/600/400" alt="Ancient temple" />
      <figcaption>Ancient temple</figcaption>
    </figure>
  </div>
  <figcaption data-field="caption">Vacation highlights</figcaption>
</figure>

Attributes

Attribute	Type	Default	Description
`layout`	`string`	`grid`	One of `grid`, `carousel`, `masonry`
`columns`	`number`	`3`	Number of columns in the grid
`lightbox`	`boolean`	`true`	Enable click-to-enlarge image overlay
`caption`	`string`	—	Caption text displayed below the gallery

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Custom columns

Attributes

Common attributes

Gallery

Basic grid gallery

Carousel layout

Masonry layout

Without lightbox

Custom columns

Attributes

Common attributes