> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/banners/banner-grid.md).

# Banner grid

A mosaic of image and video tiles in four desktop columns, where each tile picks its own size and the grid packs itself.

Banner grid turns a row of category links into something worth looking at. Each tile is an image or a looping video with its own heading and button, and because tiles come in four sizes you can give the campaign you care about twice the space without building a custom layout.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, click **Add section → Banner grid**. It arrives with four tiles already laid out.
{% endstep %}

{% step %}

#### Add your tiles

Use **Add block → Image** or **Loop video**. There is no limit, so the grid can run from three tiles to a full category wall.
{% endstep %}

{% step %}

#### Choose each tile's size

Inside the block, **Banner size** decides how much of the grid the tile takes: **Square** (1×1), **Big square** (2×2), **Horizontal** (2×1) or **Wide** (4×2, the full row). This is the single setting that shapes the whole layout.
{% endstep %}

{% step %}

#### Fill in the content

Give each tile a **Heading**, **Text**, a **Button** and a **Link**. Position the copy with **Vertical content position** — including **Stretched**, which pushes the heading to the top and the button to the bottom of the tile.
{% endstep %}

{% step %}

#### Set the spacing

**Desktop space between items** runs 0–80 px (24 by default) and **Mobile space between items** 0–40 px (16 by default). Set both to 0 for a seamless mosaic with no gaps at all.
{% endstep %}

{% step %}

#### Check the width

**Section width** is **Wide** by default. **Narrow** centers the grid in a slimmer column, which makes every tile shorter.
{% endstep %}
{% endstepper %}

### Good to know

**The grid packs itself.** Desktop is a four-column grid that backfills gaps, so a small tile can slide up into a hole left by a larger one. The visual order will not always match the block order in the sidebar — that is the layout working, not a bug. Reorder or resize tiles until the pattern reads the way you want.

**Tile height is not a setting.** Row height comes from the theme and adjusts to the section width and the spacing you chose — a wider gap gives slightly shorter rows, and **Narrow** gives noticeably shorter ones. The proportions of each tile are fixed by its **Banner size**.

{% hint style="warning" %}
**Below 1024 px, Banner size stops applying.** On tablets every tile — whatever size you picked — becomes the same square in a two-column grid. Below 768 px the sizes come back in a simplified form: **Square** takes one cell, **Horizontal** takes the full width at half height, and **Big square** and **Wide** both take a full-width square. Always check the layout at tablet width before you finish.
{% endhint %}

**Hover content is forced visible on small screens.** If you turn on **Show content only on hover**, the headings appear on cursor-over on desktop — but from 1024 px down they are always shown, since there is no hover on touch. Tapping a tile that has hover content reveals it rather than following the link on the first tap.

**Buttons can be hidden on mobile.** Each block has **Show button on mobile**, on by default. Turn it off on small tiles where the button crowds the heading — the tile stays clickable through its **Link**.

**Tiles are inverted by default.** Each block's color scheme is set to invert, which assumes light text over darker media. Adjust the overlay or the block color if your images are pale.

### Customization ideas

* Lead with one **Wide** tile as a campaign banner, then three **Square** tiles underneath as category entry points.
* Mix one **Loop video** tile in **Big square** among still tiles — a single moving element in a still grid draws the eye without feeling busy.
* Set both spacing values to 0 and use **Square** tiles only for an edge-to-edge lookbook wall.
* Use **Vertical content position → Stretched** on large tiles so the heading sits at the top and the button at the bottom, the way an editorial cover works.
* Build an eight-tile grid of **Square** tiles as a shop-by-category index on a landing page.

### Best practices

* Pick one tile to be the hero. A grid where everything is **Big square** has no hierarchy.
* Keep headings to a few words — they sit on top of the media, in a space that shrinks on tablets.
* Crop images to the shape of the tile they go into; a landscape photo in a **Square** tile loses its edges.
* Compress video tiles hard. See [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).

***

### Related

* [Banner gallery](/docs/avante-themes/sections/banners/banner-gallery.md)
* [Split banner](/docs/avante-themes/sections/banners/split-banner.md)
* [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/sections/banners/banner-grid.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.