Grid block
A container that arranges its content in columns. A new Grid starts with two Column blocks; add more columns inside the Grid. The Grid block is also available in Content blocks, Featured products and inside another Grid’s column.
Grid settings
| Setting | Description |
|---|---|
| Row width | How the width of the grid is set: Percentage of the available width or fixed Pixels. Default: Percentage. |
| Custom row width (percentage) | Width of the grid as a share of the available width. Available only when Row width is Percentage. Range: 50–100 %. Default: 100 %. |
| Custom row width (pixels) | Maximum width of the grid. Available only when Row width is Pixels. Range: 400–1400 px, step 20. Default: 1400 px. |
| Desktop columns | Number of columns per row on desktop. Range: 1–6. Default: 3. |
| Custom columns width | Lets you make the two columns different widths. Available only when Desktop columns is 2. Default: Off. |
| Columns proportion | Width of the first column; the second takes the rest. Available only with 2 columns and Custom columns width on. Range: 30–70 %. Default: 50 %. |
| Mobile columns | Number of columns per row on mobile. Range: 1–3. Default: 1. |
| Vertical alignment | Aligns columns of different height to the Top, Center or Bottom. Default: Top. |
| Desktop horizontal spacing | Space between columns on desktop. Range: 0–60 px. Default: 8 px. |
| Mobile horizontal spacing | Space between columns on mobile. Range: 0–40 px. Default: 8 px. |
| Desktop vertical spacing | Space between rows on desktop. Range: 0–60 px. Default: 16 px. |
| Mobile vertical spacing | Space between rows on mobile. Range: 0–40 px. Default: 16 px. |
| Top, Bottom, Left, Right | Space around the grid on desktop. Range: 0–100 px, step 1. Default: 0 px. |
| Top mobile, Bottom mobile, Left mobile, Right mobile | Space around the grid on mobile. Range: 0–100 px, step 1. Default: 0 px. |
Column settings
| Setting | Description |
|---|---|
| Column style | Standard shows the content directly on the page; Card puts it on a card with its own color scheme. Default: Standard. |
| Color scheme | Color scheme of the card. Available only when Column style is Card. Schemes are managed in Theme settings → Colors. Default: Scheme 7. |
| Card border radius | Corner rounding of the card. Available only when Column style is Card and the theme shape style is not Angular. Range: 0–100 px. Default: 20 px. |
| Vertical alignment | Aligns the content inside this column: Same as grid, Top, Center or Bottom. Default: Same as grid. |
| Stick this column while scrolling | Keeps the column in view while the rest of the row scrolls. Applies on desktop only; the column stops sticking once its own content ends or the row scrolls past. Default: Off. |
| Sticky offset from top | Distance between the sticky column and the top of the screen. Available only when sticking is on. Range: 0–200 px, step 4. Default: 32 px. |
| Top, Bottom, Left, Right | Space around the column content on desktop. Range: 0–100 px, step 1. Default: 0 px. |
| Top mobile, Bottom mobile, Left mobile, Right mobile | Space around the column content on mobile. Range: 0–100 px, step 1. Default: 0 px. |
App blocks can also be added to a slide.