# Grid

{% hint style="info" %}
This section is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme.md) to access new features.
{% endhint %}

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.

<div><figure><img src="/files/3YhtjF1Cw0A6R62EfzgW" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/qQSlpQbGYFzjNVynM4dy" alt=""><figcaption></figcaption></figure></div>

## Set up section

***

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

Click the section to add a **section header** and change **section styles** for colors and spacing.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr></tbody></table>

## 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

### Add background media

***

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

<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/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</a></td></tr></tbody></table>

{% 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;">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 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="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 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;">Content position</mark></td><td>For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>For both desktop and mobile</td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td>Choose to display the content full width or a custom width.<br><br>Select Custom width to set the <strong>maximum content width</strong> between 100 to 900 pixels.</td></tr><tr><td><mark style="color:blue;">Overline</mark></td><td>Add text to show a small heading above the main heading.</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;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</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;">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 Solid, Outline, or Text.</td></tr><tr><td><mark style="color:blue;">Button size</mark></td><td>Change the size of the button to Small or Regular.</td></tr></tbody></table>

## Scrolling text

***

Display scrolling text around the edges of grid items.&#x20;

1. In the grid item block settings, add the **text** you want to show.&#x20;
2. Then, in the section settings, change the style of scrolling text:

* Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.
* Choose to scroll content towards the **Left** or **Right**.
* Show an icon and change the text divider

&#x20;

`Click section for settings`

<table><thead><tr><th width="184.5">Setting</th><th width="417.5">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable scrolling text</mark></td><td>Toggle on to rotate scrolling text added to grid blocks.</td><td></td></tr><tr><td><mark style="color:blue;">Scroll duration</mark></td><td>Change the number of seconds it takes for the content to scroll from beginning to end.</td><td><strong>5 - 45 secs</strong></td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td>Choose the direction of scrolling.</td><td><strong>Left</strong> <em>Default</em><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Text divider</mark></td><td>Display an icon or dot between scrolling text blocks.</td><td><strong>Icon</strong><br><strong>Dot</strong><br><strong>None</strong></td></tr><tr><td><mark style="color:blue;">Icon</mark></td><td>For the icon text divider, select from 30+ free icons.</td><td></td></tr></tbody></table>

## Grid spacing

***

Adjust the **grid spacing** between grid blocks on desktop and mobile screens.

&#x20;

`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;">Desktop spacing</mark></td><td>For desktop screens, adjust spacing between the grid blocks: between 0 and 60 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile spacing</mark></td><td>For mobile screens, adjust spacing between the grid blocks: between 0 and 50 pixels6</td></tr></tbody></table>


---

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