Layout options let you control how elements are arranged inside a row or column container. While it might seem complex at first, once you understand how each setting works, it becomes intuitive. This guide breaks down each option with clear explanations and examples.
Overview
When you place multiple elements inside a container, layout options determine:
Which direction elements flow (horizontal or vertical)
How much space appears between elements
How elements are positioned within the container
What happens when elements don't fit
Available Layout Options
Option | What It Controls |
Direction | Whether elements flow horizontally (row) or vertically (column) |
Gap | The space between elements |
Distribution | How elements spread out along the main direction |
Alignment | How elements position in the secondary direction |
Wrap | Whether elements move to a new line when they don't fit |
Direction
Direction controls whether a container behaves like a row or a column.
Row Layout
Elements are placed side by side, from left to right.
Column Layout
Elements are stacked vertically, one on top of another.
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.
Configuration Options
Setting | Description |
Horizontal Gap | Space between elements horizontally |
Vertical Gap | Space between elements vertically |
Linked | Adjusting one value automatically updates the other |
Example
In a row with three buttons and a 16px gap, each button will have 16 pixels of space between them.
Tip: Link the horizontal and vertical gap values for consistent spacing in both directions.
Distribution
Distribution controls how elements are spaced out along the main direction of the container:
Rows → Distribution affects horizontal spacing
Columns → Distribution affects vertical spacing
Distribution determines where elements start and how they relate to each other and the container edges. It does not change the order of elements—they appear in the same order as in the Layers panel.
Distribution Options
Option | Behavior |
Start | Elements align to the starting edge (left for rows, top for columns) |
Center | Elements group together in the center |
End | Elements align to the ending edge (right for rows, bottom for columns) |
Space Between | Elements spread evenly with no gaps at the edges |
Space Evenly | Elements spread evenly with equal gaps at the edges |
Alignment
Alignment controls how elements are positioned in the secondary direction of the container:
Rows → Alignment affects vertical positioning
Columns → Alignment affects horizontal positioning
Like distribution, alignment does not change the element order.
Alignment Options
Option | Behavior |
Start | Elements align to the starting edge (top for rows, left for columns) |
Center | Elements center in the secondary direction |
End | Elements align to the ending edge (bottom for rows, right for columns) |
Stretch | Elements expand to fill the container in the secondary direction |
Wrap
Wrap determines how the container handles elements that exceed its boundaries.
Wrap Off (No)
Elements that extend beyond the container's limits will either be:
Clipped — Hidden at the container edge
Shown outside — Visible beyond the container
The behavior depends on the Overflow setting in the Size section.
Wrap On (Yes)
Elements that don't fit automatically move to the next line (in a row) or next column (in a column layout), creating a wrapping effect.
When to Use Wrap
Scenario | Wrap Setting |
Fixed number of items that always fit | Off |
Responsive layouts that adapt to screen size | On |
Product grids that reflow on smaller screens | On |
Navigation bars with fixed items | Off |
Quick Reference
Task | Location |
Set direction | Right sidebar → Layout → Direction |
Set gap | Right sidebar → Layout → Gap |
Link/unlink gap values | Gap section → Click link icon |
Set distribution | Right sidebar → Layout → Distribution |
Set alignment | Right sidebar → Layout → Alignment |
Toggle wrap | Right sidebar → Layout → Wrap |
Direction Quick Guide
Direction | Elements Flow | Distribution Affects | Alignment Affects |
Row | Left to right | Horizontal spacing | Vertical position |
Column | Top to bottom | Vertical spacing | Horizontal position |
Common Layout Patterns
Pattern | Direction | Distribution | Alignment | Wrap |
Navigation bar | Row | Space Between | Center | Off |
Card grid | Row | Start | Stretch | On |
Centered hero content | Column | Center | Center | Off |
Footer columns | Row | Space Evenly | Start | On |
Sidebar menu | Column | Start | Stretch | Off |