# Collection list grid

### Section overview

The Collection list grid Section displays a curated grid of collection cards, allowing merchants to showcase multiple collections in a visually appealing layout.

#### Common Use Cases

* Featuring seasonal or thematic collections on the homepage
* Creating category navigation areas on landing pages
* Highlighting new or promotional collections
* Building a visual directory of product categories

#### Usage Tips

* Use the split layout option for more engaging designs when you have compelling section copy
* Adjust the number of columns based on the number of collections you want to display
* Consider adding content blocks to break up the grid and include promotional messages
* For mobile optimization, limit to 1-2 collections per row to ensure good visibility
* Use consistent collection images with similar aspect ratios for a cohesive grid layout

### Section Settings

| Setting              | Description                                                        |
| -------------------- | ------------------------------------------------------------------ |
| Collection           | Select collections to display in the grid                          |
| Heading              | Main heading text for the section                                  |
| Content              | Rich text content displayed below the heading                      |
| Button label         | Text for the optional call-to-action button                        |
| Button URL           | URL the button links to when clicked                               |
| Top spacing          | Controls padding above the section (0-300px)                       |
| Bottom spacing       | Controls padding below the section (0-300px)                       |
| Color scheme         | Sets the background and text color theme                           |
| Border color         | Determines the color of section borders                            |
| Button color         | Controls the style and color of buttons in the section             |
| Border position      | Sets where borders appear (top, bottom, both, or none)             |
| Desktop columns      | Number of columns to display on desktop (1-8)                      |
| Mobile columns       | Number of columns to display on mobile (1-3)                       |
| Horizontal alignment | Controls horizontal alignment of section content                   |
| Enable margin        | Toggles horizontal margin on the section                           |
| Enable split         | Enables split layout with header on the left and grid on the right |
| Visibility           | Controls section visibility on different device types              |

### Block Settings

#### Content Block

This block type adds custom content cards within the collection grid, useful for promotional messages or special announcements.

Block limit: 20

| Setting              | Description                                            |
| -------------------- | ------------------------------------------------------ |
| Heading              | Title text for the content block                       |
| Content              | Rich text content for the block                        |
| Button label         | Text for the optional call-to-action button            |
| URL                  | Link destination for the block                         |
| Image                | Primary image to display in the block                  |
| Image background     | Background image for the block                         |
| Video                | Optional video to display in the block                 |
| Enable autoplay      | Automatically plays video when in view                 |
| Enable mute toggle   | Shows mute/unmute controls for videos                  |
| Enable loop          | Continuously loops video playback                      |
| Minimum height       | Sets the minimum height of the block (0-500px)         |
| Enable padding       | Toggles padding inside the block                       |
| Color scheme         | Sets the background and text color theme for the block |
| Text color           | Controls the color of text content                     |
| Border color         | Determines the color of block borders                  |
| Button color         | Controls the style and color of the button             |
| Enable gradient      | Adds a gradient overlay to the block                   |
| Vertical alignment   | Controls vertical alignment of block content           |
| Horizontal alignment | Sets horizontal alignment of block content             |
| Text position        | Places text either above or below the media content    |
| Row span             | Number of rows the block spans in the grid (1-6)       |
| Column span          | Number of columns the block spans in the grid (1-6)    |


---

# 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.brickspacelab.com/keystone/sections/products-and-collections/collection-list-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.