Layout options let you control how elements are arranged inside a row or column container. It might seem complex at first, but once you understand how each setting works, it becomes intuitive. Here's a breakdown of each option.
Direction
The direction setting controls whether a container behaves like a row or a column.
In a row layout, elements are placed side by side, from left to right.
In a column layout, elements are stacked vertically, one on top of another.
You can toggle between these two modes using the Direction control in the layout panel.
Gap
Gap defines the space between elements inside a row or column container. You can set horizontal and vertical gaps separately. If you prefer, you can link the values so that adjusting one will automatically update the other.
Distribution
Distribution controls how elements are spaced out along the main direction (horizontal for rows, vertical for columns) of the container.
It determines where the elements start and how they are spaced in relation to each other and the edges of the container. Distribution does not affect the order of elements—they will appear in the same order as they do in the Layers panel.
Available distribution options include:
Available distribution options include:
Align to the start (top or left edge)
Center align
Align to the end (bottom or right edge)
Distribute evenly with no gaps on the edges
Distribute evenly with equal gaps on the edges
Alignment
Alignment controls how elements are positioned in the secondary direction (vertical for rows, horizontal for columns). Like distribution, alignment doesn’t change the element order.
Available alignment options include:
Align to the start (left or top edge)
Center align
Align to the end (right or bottom edge)
Stretch elements to fill the container in the secondary direction
Wrap
Wrap determines how the container handles elements that exceed its boundaries.
If Wrap is set to No, elements that extend beyond the container’s limits will either be clipped or shown outside the container, depending on the Overflow setting in the Size section.
If Wrap is set to Yes, elements that don’t fit will automatically move to the next line (in a row) or next column (in a column layout), creating a wrapping effect.