> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/grid.md).

# Grid

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

<img src="/files/FAiC9iUhNNy0d9ihSEyA" alt="" width="375">

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add grid blocks</h2>

***

Add **Grid blocks** with adjustable widths. Create different layouts by reordering the blocks with the drag-and-drop handles **`⋮⋮`** and customize the width and height of each block.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Grid item** block to open the settings.

   > Click **(+) Add item** to create new grid blocks.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under **Background image**, click **Select Image** to select or upload an image.

   > There are no required image dimensions. We recommend a minimum width of **`2500px`** for optimal quality across all devices.

   > (*Optional*.) Select or upload alternate **Mobile image** that looks best on smaller screen sizes.
3. Change the **Media fit** to either have your image **Cover** the entire block or **Contain** the image in the block with its original shape.
4. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
5. Use the **Height** and **Mobile height** sliders to control the maximum height of the grid item.
6. Change the width of the grid item (for desktop screens). Either 100%, 66%, 50%, 33%, or 25%.
7. Use the drag and drop handles **`⋮⋮`** to change the layout of the mosaic blocks.

   ![](/files/tOHF9cG7TWZSPV5YgAH3)

   > Click the **Remove block** button in the block settings to remove a block.
8. Click **Save**.

</details>

### <mark style="color:$primary;">Background media</mark> <a href="#add-background-media" id="add-background-media"></a>

{% hint style="info" %}
Support for background videos were added in v5.2.0. View the [changelog](/stiletto/readme/changelog.md) or learn how to [update your theme](/stiletto/general/theme-updates.md).
{% endhint %}

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

For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="185.93182373046875"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code> <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>

<sub><mark style="color:$info;">Click Grid item block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="194.78125"></th><th></th></tr></thead><tbody><tr><td><mark style="color:$primary;">Image</mark></td><td>Select or upload an image.</td></tr><tr><td><mark style="color:$primary;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile screens.</td></tr><tr><td><mark style="color:$primary;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr><tr><td><mark style="color:$primary;">Mobile video</mark></td><td>Upload an alternate video to display on mobile screens.</td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="159">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">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:$primary;">Height</mark></td><td>Set the maximum height of the grid item in pixels for desktop screens.</td></tr><tr><td><mark style="color:$primary;">Mobile height</mark></td><td>Set the maximum height of the grid item in pixels for mobile screens.</td></tr><tr><td><mark style="color:$primary;">Image</mark></td><td>Select an image to display as the grid item background. There are no required image dimensions. We recommend a minimum width or height of 2500px.</td></tr><tr><td><mark style="color:$primary;">Media fit</mark></td><td>Choose to have the item image <strong>Cover</strong> the entire block or <strong>Contain</strong> the image in the block with its original shape.</td></tr><tr><td><mark style="color:$primary;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns#image-focal-point">Image settings guide</a>.</td></tr></tbody></table>

### <mark style="color:$primary;">Add color overlay</mark>

The color **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

<sub>Click Item block to find settings</sub>

<table><thead><tr><th width="190">Setting</th><th width="569">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select color scheme to apply 'Background' or 'Gradient' colors.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).</td></tr></tbody></table>

### <mark style="color:$primary;">Block headings</mark>

Each grid block can have up to three types of headings. Adjust the position, width, and color of your headings to match your image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid item** block to open the settings.
2. (*Optional*.) Enter text for an **Accent** heading in all capitals above the main heading.

   > We recommend a short one or two word label.
3. Add **Heading** text for a title.

   > we recommend a short title of just a few words.

   > Change the **Heading size** to **Small**, **Medium**, or **Large**.
4. Add **Subheading** text for a short paragraph.

   > We recommend two to three short sentences.

   > Change the **Subheading size** to **Small**, **Medium**, or **Large**.
5. (*Optional*.) Add additional **Text** to display beneath the Subheading.
6. Select a **Text position** (above) to position your headings (and button) in one of 9 areas of the grid block.

   > Change the **Text size** to **Small**, **Medium**, or **Large**.
7. Select a **Text color** to match your headings to your brand and make sure the text is readable.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
8. Click **Save**.

</details>

### <mark style="color:$primary;">Block button</mark>

You can link to your collections or products or any other page. Add a **Button Label** and **Link** to display a button. Leave the **Button label** blank to make the entire block a clickable link.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid item** block to open the settings.
2. Select or paste a **Link**.

   > Make sure you copy the full URL, including **`https://`** at the start. For example: **`https://instagram.com/abc123`**.
3. Enter text for a **Button label**.

   > Leave the **Button text** blank to make the entire block a clickable link.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Select a **Button style**: either **Solid**, **Outline**, or **Text**.
5. Click **Save**.

</details>

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">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:$primary;">Accent</mark></td><td>Add text to show a small heading above the main heading.</td></tr><tr><td><mark style="color:$primary;">Heading</mark></td><td>Add text to show a main heading.</td></tr><tr><td><mark style="color:$primary;">Heading size</mark></td><td>Change the font size of the heading to <strong>xx-small</strong> to <strong>Display x-large</strong></td></tr><tr><td><mark style="color:$primary;">Subheading</mark></td><td>Enter text to display a section subheading below the heading.</td></tr><tr><td><mark style="color:$primary;">Subheading size</mark></td><td>Change the font size of the subheading to <strong>xx-small</strong> to <strong>x-large</strong>.</td></tr><tr><td><mark style="color:$primary;">Text</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:$primary;">Text size</mark></td><td>Change the font size of the text to <strong>xx-small</strong> to <strong>5x-large</strong>.</td></tr><tr><td><mark style="color:$primary;">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:$primary;">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. Get started, Join us, Shop now).</td></tr><tr><td><mark style="color:$primary;">Button style</mark></td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

<h2 align="center">Grid spacing</h2>

***

Adjust the **grid spacing** between blocks for a more compact or spacious layout.

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">Grid spacing</mark></td><td>Increase or decrease the spacing between the grid blocks: between 0 and 50 pixels.</td></tr></tbody></table>

***

> **Related links**
>
> [Collection list grid](/stiletto/sections/theme-sections/collection-list-grid.md)\
> [Featured collection grid](/stiletto/sections/theme-sections/featured-collection-grid.md)\
> [Gallery carousel](/stiletto/sections/theme-sections/gallery-carousel.md)\
> [Multi-column](/stiletto/sections/theme-sections/multi-column.md)