Inner Layout
When you place one Builder element inside another, you can set Inner Layout attributes on the outer element. Inner Layout options are only available on elements that have children inside them.
Often the outer, or parent, element is a Box block. Putting your content inside of a Box gives you access to all the child layout options in this document.
Show Inner Layout options
To display the Inner Layout section:
- Select a parent container with child blocks.
- Open the Style tab.
- Go to the Layout section.
The Inner Layout section only shows if the selected block has nested elements, also known as child elements.
Arrange child blocks
The Inner Layout section includes five buttons that control how child blocks are arranged inside their parent.
Select the parent block, open the Style tab, and go to the Inner Layout section to access these options.
| Option | Description |
|---|---|
Horizontal | Arranges child blocks in a row, side by side. |
Vertical | Stacks child blocks on top of each other in a column. |
Wrap | Lets child blocks flow onto multiple lines instead of forcing them into a single row, similar to a grid. Useful when you want overflowing content to wrap onto a new line rather than getting cut off or forcing a scrollbar. |
Scroll | Keeps child blocks in a single row without wrapping. If the combined width of the elements exceeds the parent's width, a horizontal scrollbar appears so users can scroll left and right instead of the layout wrapping or growing taller. |
Columns | Converts the selected blocks into a responsive multi-column layout. |
The video below demonstrates all five options in action.
Inner Align
The Inner Align control gives you a 3x3 grid for positioning child blocks precisely within their parent container. Click the square that matches where you want the content positioned; the highlighted square shows the current alignment. Use Inner Align when the standard alignment options don't give you enough precision.
To set Inner Align:
- Select the parent block.
- Open the Style tab.
- In the Inner Layout section, click the Inner Align grid and select a position.
This is built on CSS flexbox. Selecting Columns or Row makes the parent block a flex container, and the Align Children section sets the align-items property on it to position children along the cross axis.
What's next
Build on layout skills by exploring related topics:
