Skip to content
Grid
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
- Grid articles
- Grid collections
- Grid gallery
- Grid recommendations
- Grid recent
- 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 | • None |
Color
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background and text colors | • Body |
| Color border | Controls the border color | • Body |
Style
| Setting | Description | Options |
|---|---|---|
| Border position | Controls where borders appear | • None (default) |
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 | • All (default) Visible when Show advanced settings is on |
| Load animation | Animation when the block first loads | • None (default) Visible when Show advanced settings is on and Scroll animation is None |
| Scroll animation | Adds scroll-triggered animations | • None (default) Visible when Show advanced settings is on and Load animation is None |