# Banner grid

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FFVbpuudHnwrvosGV9xmp%2Fbanner-grid-gaia.webp?alt=media&#x26;token=e45d2cb3-dfbb-4a09-802f-b26414a7b0af" 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](https://docs.ultramarinastudios.com/blocks/section-blocks/section-header) (hidden by default, fill in the settings to display)
* **Banner grid item**: This block houses each [image banner](https://docs.ultramarinastudios.com/blocks/section-blocks/image-banner) 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FFVbpuudHnwrvosGV9xmp%2Fbanner-grid-gaia.webp?alt=media&#x26;token=e45d2cb3-dfbb-4a09-802f-b26414a7b0af" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fr61lHp4JEQm7alvXSLEh%2Fbanner-grid-gloss.webp?alt=media&#x26;token=480a2e07-23a7-4603-ad7c-ea38d0809189" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FWEjYe87L7eFInRrRbUSd%2Fbanner-grid-primavera.webp?alt=media&#x26;token=3949c2ce-749d-4abf-9eae-2e387927e24c" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FPPfC3w9AorUgGPqYK4cL%2Fbanner-grid-savoir.webp?alt=media&#x26;token=7abb1e2b-2538-4789-8a4f-cfd4cdcb1a20" 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](https://docs.ultramarinastudios.com/common-settings):

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