# Grid

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-0e787b9e7eadaa1e1f7cf3b46b5019d56b67f1be%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Overview

A flexible grid container component that allows for dynamic layout configuration of child blocks. Supports both app and theme blocks in a responsive grid layout with customizable columns for desktop and mobile views. Ideal for product grids, image galleries, or any content that benefits from a grid structure.

## Common use cases

* Display multiple blocks in a grid layout for product grids, image galleries, or any content that benefits from a grid structure
* Configure desktop and mobile columns based on content size and screen real estate
* Use gap settings to control spacing between grid items
* Enable scroll animations for dynamic content reveals

## Compatible blocks

The following blocks can be nested within this block:

* [Grid products](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/product-grid)
* [Grid articles](https://help.brickspacelab.com/slab/content/blocks/all-pagination/articles/article-grid)
* [Grid collections](https://help.brickspacelab.com/slab/content/blocks/all-pagination/collections/grid-collection-grid)
* [Grid gallery](https://help.brickspacelab.com/slab/content/blocks/all-pagination/gallery/product-gallery)
* [Grid recommendations](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/grid-product-recommendations)
* [Grid recent](https://help.brickspacelab.com/slab/content/blocks/all-pagination/products/grid-recently-viewed)
* [Grid item](https://help.brickspacelab.com/slab/content/blocks/layout/default-grid/grid-item)
* All theme blocks
* App blocks

## Block settings

### General

| Setting                | Description                                              | Options                   |
| ---------------------- | -------------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility, load animation, and scroll animation | Checkbox (default: false) |

### Spacing

| Setting                   | Description                                  | Options                                                                      |
| ------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------- |
| Top spacing               | Padding space at the top of the container    | 0 - 300 px (default: 0)                                                      |
| Bottom spacing            | Padding space at the bottom of the container | 0 - 300 px (default: 0)                                                      |
| Enable horizontal padding | Adds horizontal padding around the container | Checkbox (default: false)                                                    |
| Gap size                  | Controls spacing between grid items          | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting      | Description                             | Options                                                                                                                                                                                    |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background and text colors | <p>• Body<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent (default)</p> |
| Color border | Controls the border color               | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p>                                       |

### Style

| Setting         | Description                   | Options                                                                                                            |
| --------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position | Controls where borders appear | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |

### Layout

| Setting     | Description                          | Options            |
| ----------- | ------------------------------------ | ------------------ |
| Row desktop | Number of columns in grid on desktop | 1 - 8 (default: 5) |
| Row mobile  | Number of columns in grid on mobile  | 1 - 3 (default: 2) |

### Display

| Setting          | Description                          | Options                                                                                                                                                                                                                                          |
| ---------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Visibility       | Controls when the block is visible   | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                                               |
| Load animation   | Animation when the block first loads | <p>• None (default)<br>• Fade<br>• Fade up<br>• Offset fade<br>• Offset fade up</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Scroll animation</strong> is <strong>None</strong></p>                      |
| Scroll animation | Adds scroll-triggered animations     | <p>• None (default)<br>• Fade<br>• Slide up<br>• Slide down<br>• Slide left<br>• Slide right<br>• Zoom</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Load animation</strong> is <strong>None</strong></p> |