Layout Overview
Layout controls arrange a container's direct children. Select their parent Section or Div, open Design > Layout, choose a mode, and set alignment and spacing.
| Mode | Controls |
|---|---|
| Vertical | Stack children; horizontal/vertical alignment and gap. |
| Horizontal | Row alignment, gap, and a breakpoint for stacking. |
| Grid | Equal-width columns, items per row, spacing, and cell alignment. |
| Advanced | Direct flex or grid controls for wrapping and custom tracks. |
Layout mode is shared across breakpoints; supported controls within it are responsive.
Size and Spacing
Child dimensions affect layout. Gap separates children, Padding adds inner space, and Margin adds outer space. Alignment needs unused container space.
Basic Grid overrides child dimensions unless Advanced > Use Original Item Dimensions is enabled. Sections also have an inner content area.
Some elements and older designs use different controls. A loop's List > Layout separately arranges repeated items.
On this page