# Media grid

<figure><img src="/files/EuZmnrwHQe7dSghIXoeU" alt=""><figcaption><p>Media grid on Savoir demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Click into each **image** block to upload/select an image
* If you want to keep the **rich text** block, edit the nested **heading** and **button** blocks
  {% endhint %}

### Settings

* **Desktop columns**
* **Mobile columns**
* **Layout**: If the number of images exceeds the number of columns, choose to display them either as a grid or as a slideshow
* **Container type**: See [common settings](/common-settings.md)
* **Vertical grid gap**: Keep as default or override to create tight grids
* **Horizontal grid gap**: Keep as default or override to create tight grids
* **Slideshow** settings apply to the slideshow layout:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

### Blocks

This section comes with four types of blocks:

* [Section header](/sections/section-header.md) (hidden by default, fill in the settings to display)
* **Rich text**: Allows you to add a simple rich text block like the Savoir example above ("Get Inspired")
* **Image** (similar to the [image theme block](/blocks/image.md)):&#x20;
  * **Image**
  * **Image ratio**
  * **Behavior:**
    * **Link**: Optionally link the image to another page or social media post
    * **Link label**: If you've added a link, describe the link destination for accessibility
    * **Product**: Optionally, connect a product to display the quick add button
* [Buttons](/blocks/buttons.md) (hidden by default, fill in the settings to display)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings.md):

* Container type
* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Examples & inspiration

<div><figure><img src="/files/GelroyXYhiekgphHZrEE" alt=""><figcaption><p>Composition media grid, featuring square images with no spacing.</p></figcaption></figure> <figure><img src="/files/zrQ3YfYitf5ZRL1E4PfS" alt=""><figcaption><p>Gloss media grid, featuring portrait images with no spacing</p></figcaption></figure> <figure><img src="/files/IdtLM2mDWsm48y8CSltq" alt=""><figcaption><p>Gaia media grid, featuring square images with no spacing</p></figcaption></figure> <figure><img src="/files/Z2jqphX0dY8pDAWOG84s" alt=""><figcaption><p>Primavera media grid, featuring images with narrow spacing</p></figcaption></figure> <figure><img src="/files/hT7HODacnUStsaGK4zX4" alt=""><figcaption><p>Savoir media grid, with a page width container and narrow spacing</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ultramarinastudios.com/sections/media-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.