Layout block: Grid
General settings
| Setting | Description |
|---|---|
| Row width | Choose how the grid's row width is measured: Percentage (relative to its container) or Pixels (a fixed size). |
| Custom row width (Percentage) | Use the slider to set the row's width as a percentage of its container. Only available when Row width is set to Percentage. The range is 50% to 100%. |
| Custom row width (Pixels) | Use the slider to set a fixed row width. Only available when Row width is set to Pixels. The range is 400px to 1400px. |
| Desktop columns | Use the slider to set how many columns the grid has on desktop. The range is 1 to 6. |
| Custom columns width | Turn this on to set a custom width proportion between the two columns instead of splitting them evenly. Only available when Desktop columns is set to 2. |
| Columns proportion | Use the slider to set the width proportion of the first column relative to the second. Only available when Desktop columns is set to 2 and Custom columns width is turned on. The range is 30% to 70%. |
| Mobile columns | Use the slider to set how many columns the grid has on mobile devices. The range is 1 to 3. |
| Vertical alignment | Choose how columns are vertically aligned within the grid row: Top, Center, or Bottom. Only available when there is more than one column on desktop or mobile. |
| Horizontal spacing | Use the slider to set the spacing between columns on desktop. Only available when there is more than one column on desktop or mobile. The range is 0px to 100px. |
| Vertical spacing (mobile gap) | Use the slider to set the spacing between columns on mobile devices. Only available when there is more than one column on mobile. The range is 0px to 60px. |
| Vertical spacing | Use the slider to set the spacing between rows on desktop. The range is 0px to 100px. |
| Mobile vertical spacing | Use the slider to set the spacing between rows on mobile devices. The range is 0px to 100px. |
| Padding top | Use the slider to set the spacing above the grid on desktop. The range is 0px to 100px. |
| Padding bottom | Use the slider to set the spacing below the grid on desktop. The range is 0px to 100px. |
| Padding left | Use the slider to set the spacing to the left of the grid on desktop. The range is 0px to 100px. |
| Padding right | Use the slider to set the spacing to the right of the grid on desktop. The range is 0px to 100px. |
| Padding top mobile | Use the slider to set the spacing above the grid on mobile devices. The range is 0px to 100px. |
| Padding bottom mobile | Use the slider to set the spacing below the grid on mobile devices. The range is 0px to 100px. |
| Padding left mobile | Use the slider to set the spacing to the left of the grid on mobile devices. The range is 0px to 100px. |
| Padding right mobile | Use the slider to set the spacing to the right of the grid on mobile devices. The range is 0px to 100px. |
Field visibility conditions:
- Custom row width shows the Percentage slider when Row width is set to Percentage, and the Pixels slider when set to Pixels.
- Custom columns width appears only when Desktop columns is set to 2.
- Columns proportion appears only when Desktop columns is set to 2 and Custom columns width is turned on.
- Vertical alignment and Horizontal spacing appear only when the grid has more than one column (desktop or mobile).
- The mobile column gap appears only when Mobile columns is set to more than 1.
Note: the two fields labeled "Vertical spacing" in the customizer actually control different things — one (with the note "mobile gap" above) is the horizontal gap between columns on mobile, and the other is the vertical gap between rows on desktop. This ambiguity comes directly from the theme's own field labels, not from an error in this table.
Column settings
| Setting | Description |
|---|---|
| Style | Choose how the column looks: Standard (no card background) or Card (adds a background color and rounded corners). |
| Color scheme | Choose the color scheme applied to the column's card background and text. Only available when Style is set to Card. |
| Card border radius | Use the slider to set how rounded the corners of the card are. Only available when Style is set to Card. The range is 0px to 100px. |
| Padding top | Use the slider to set the spacing above the column's content on desktop. The range is 0px to 100px. |
| Padding bottom | Use the slider to set the spacing below the column's content on desktop. The range is 0px to 100px. |
| Padding left | Use the slider to set the spacing to the left of the column's content on desktop. The range is 0px to 100px. |
| Padding right | Use the slider to set the spacing to the right of the column's content on desktop. The range is 0px to 100px. |
| Padding top mobile | Use the slider to set the spacing above the column's content on mobile devices. The range is 0px to 100px. |
| Padding bottom mobile | Use the slider to set the spacing below the column's content on mobile devices. The range is 0px to 100px. |
| Padding left mobile | Use the slider to set the spacing to the left of the column's content on mobile devices. The range is 0px to 100px. |
| Padding right mobile | Use the slider to set the spacing to the right of the column's content on mobile devices. The range is 0px to 100px. |
Field visibility conditions:
- Color scheme and Card border radius appear only when Style is set to Card.
Note: each Column block can also contain its own nested blocks (Image, Text, Button, Spacer, Divider, or app blocks) to build its content — the fields above only control the column's card style, color, and padding.