# 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FfnDddg04NcM6MwsgpJ8Q%2Fgrid-glow.jpg?alt=media&#x26;token=2dcec7a2-2596-4553-8c2e-3b2c5a6f1a96" alt=""><figcaption></figcaption></figure>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FryzD9XPdWleYIEVEbTrm%2Fgrid-flair.jpg?alt=media&#x26;token=5f103b33-497b-49a5-840e-eed0af112cbc" 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="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) 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="../section-styles#image-overlays">#image-overlays</a></td><td><a href="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F73JN6EXgS8wovHQZ2N6u%2Foverlay-solid.png?alt=media&#x26;token=780c4a79-021f-4cd4-96e1-f7ea21e4356e">overlay-solid.png</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](https://help.fluorescent.co/cornerstone/pages/theme-sections/image-hero)\
> [Image with content](https://help.fluorescent.co/cornerstone/pages/theme-sections/media-with-content)\
> [Multi-column](https://help.fluorescent.co/cornerstone/pages/theme-sections/multi-column)