# Banner grid

<figure><img src="/files/jFqkFqjnKoaRAMylDtKq" alt=""><figcaption><p>Banner grid on the Gaia preset</p></figcaption></figure>

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

* Click into each nested **Image banner** block and upload/select an image
* Edit the nested **Heading** and **Button** blocks
  {% endhint %}

### Settings

* **Container type**: This allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
* **Row height:** Sets the minimum height for each row in the banner grid. The exact size of the banner is determined in each individual banner setting based on the number of rows and columns it occupies.
  * **Extra small** option is only <mark style="background-color:green;">available in version 1.6.0 and later</mark>
* **Vertical/horizontal grid gap:** Override your global grid to create tigher grids.

### Blocks

This section comes preloaded with two different types of blocks:

* [Section header](/blocks/section-blocks/section-header.md) (hidden by default, fill in the settings to display)
* **Banner grid item**: This block houses each [image banner](/blocks/section-blocks/image-banner.md) block. The following settings are available:
  * **Desktop column and row:** On desktop there are 4 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on desktop.
  * **Mobile column and row:** On mobile there are 2 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on mobile.

### Examples & Inspiration

Banner grids have customizeable spacing and row settings to accomodate for a wide variety of images.

<div><figure><img src="/files/jFqkFqjnKoaRAMylDtKq" alt="A banner grid with no margins between each banner item, featuring ceramics in stark lighting"><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/DymB4bVR6Ab7qvQ6buSh" alt="A banner grid with soft rounded corners featuring pastel tones and people applying health and beauty products."><figcaption><p>Gloss preset</p></figcaption></figure> <figure><img src="/files/JK2feoTW0HVgWJnhBkz6" alt="A banner grid with thin margins with luxury jewelry on white jewelry boxes against a purple background."><figcaption><p>Primavera preset</p></figcaption></figure> <figure><img src="/files/mSrU1gKVaooIfiPkCia9" alt="A banner grid for a high fashion with store with thin margins and women wearing luxury clothing. "><figcaption><p>Savoir preset</p></figcaption></figure></div>

{% 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):

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


---

# 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/banner-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.