Control the layout structure of your grid with customizable column count and gutter spacing.
Settings #
| Setting | Description |
|---|---|
| Number of Columns | Set how many columns to show per row. This is fully responsive: you can customize the number of columns for Desktop, Tablet, and Mobile separately. |
| Gutter Space | Controls the spacing (in pixels) between each grid item. Default is 20. Set to 0 for no spacing. |
Responsive Breakpoints for Columns #
| Device | Example Value | Description |
|---|---|---|
| Desktop | 3 columns | Standard large screen layout |
| Tablet | 2 columns | Optimized for medium screens |
| Mobile | 1 column | Stacks items vertically for small screens |
Use Case Example #
Scenario: You want a product grid that looks clean across devices:
- Desktop: 4 columns
- Tablet: 2 columns
- Mobile: 1 column
Set it directly in the “Number of Columns” responsive control.
