# Grid

The **Grid** section displays a flexible collage of images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

<figure><img src="/files/MkBMdXLBwxnrWzIZXByt" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/pEBU7Glm5D124kTqI7LH" alt=""><figcaption></figcaption></figure>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Grid**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-colors">/pages/CBsbGCpJAMAjEg83Oxwb#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-padding">/pages/CBsbGCpJAMAjEg83Oxwb#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-animations">/pages/CBsbGCpJAMAjEg83Oxwb#section-animations</a></td></tr></tbody></table>

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/cornerstone/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up grid items

***

Add **Grid item** blocks with background images or autoplay videos. Create different layouts by reordering the blocks with the drag-and-drop handles **`⋮⋮`** and customize the width and height of each block.

* Add background **images** or **autoplay videos**.
* Add **headings** and **buttons** with selected positions
* Change the **width** and **height** of each item

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#image-overlays">/pages/CBsbGCpJAMAjEg83Oxwb#image-overlays</a></td><td><a href="/files/ozjRjvyjOsqFJrwmb3xE">/files/ozjRjvyjOsqFJrwmb3xE</a></td></tr></tbody></table>

### Add background media

***

Add an image or autoplay video (without sound) as the grid item's background.

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 15 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;`Click Grid item block to find settings`

<table><thead><tr><th width="187">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Media type</mark></td><td>Select the type of media you want to add: <strong>Image</strong> or <strong>Video</strong>.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile screens.</td></tr><tr><td><mark style="color:blue;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr><tr><td><mark style="color:blue;">Mobile video</mark></td><td>Upload an alternate video to display on mobile screens.</td></tr></tbody></table>

### Change block width and height

***

Adjust the width and height of each block to create unique layouts.

`Click Grid item block to find settings`

<table><thead><tr><th width="179.81671142578125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td>Choose the width of the grid item as a percentage of the section width. Select 33%, 50%, 66%, or 100%.</td></tr><tr><td><mark style="color:blue;">Height</mark></td><td>For desktop and mobile, change the height of the grid item between 300 to 800 pixel.</td></tr></tbody></table>

### Add content

***

Add headings, text, and optional button to overlay the grid media.

&#x20;

`Click Grid item block to find settings`

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td>Choose the width of the grid item as a percentage of the section width. Select 100%, 66%, 50%, 33%, or 25%.</td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Choose the placement of the headings within the grid item. Select one of nine positions.</td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Choose the placement of the headings within the grid item. Select one of nine positions.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main heading.</td></tr><tr><td><mark style="color:blue;">Accent divider</mark></td><td>Choose to show a border beneath the Accent heading.</td></tr><tr><td><mark style="color:blue;">Accent divider color</mark></td><td>Choose to use the Theme color (as selected in the theme settings) or the Current color (as selected in the section settings).</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the font size of the text from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.</td></tr></tbody></table>

## Change grid layout

***

Change the overall layout of the section by enabling **full width** and adjust the **grid spacing** between item blocks.

`Click section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable full width</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Grid spacing</mark></td><td>Increase or decrease the spacing between the grid blocks: between 0 and 50 pixels.</td></tr></tbody></table>

## Section header

***

Add **headings** above the section.

`Click section to find settings`

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr></tbody></table>

***

> **Related links**\
> [Image hero](/cornerstone/pages/theme-sections/image-hero.md)\
> [Image with content](/cornerstone/pages/theme-sections/media-with-content.md)\
> [Multi-column](/cornerstone/pages/theme-sections/multi-column.md)


---

# 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://help.fluorescent.co/cornerstone/pages/theme-sections/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.