Columns
Columns creates a layout of Column child elements. Use it when each column needs its own content and design settings within a coordinated row.
Add and configure Columns
- Click Add, choose Columns, and place it in the container.
- Add or select the Column children inside Columns.
- Configure Design > Layout, including the column arrangement and responsive behavior.
- Add content inside each Column, then set the Columns Size and Spacing.
- Save your changes.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Layout
| Setting | Purpose and options | Behavior |
|---|---|---|
| Add Column | Add the child elements offered for this container. | Shared |
| Stack Vertically | Breakpoint. | Shared |
| 50% Width | Breakpoint. | Shared |
| Reverse Order | Breakpoint. | Shared |
Design > Size
| Setting | Purpose and options | Behavior |
|---|---|---|
| Width | Width. | Responsive |
| Height | Fit To Content, Expand To Fill, Custom. | Responsive |
| Min Height | Min height and unit. When: Height = Custom. | Shared |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Column Gap | Column gap and unit. | Responsive |
| Column Padding | Column padding and unit. | Responsive |
| Container | spacing controls. | See linked controls |
Troubleshooting
I cannot insert ordinary content directly into Columns
Put the content inside a Column child. Columns coordinates its Column elements.
The columns do not stack at the expected width
Check the layout's responsive settings and test the width at which the row should become vertical.