# Arrange elements automatically with Auto layout
Auto layout is what arranges the children of a Stack or Cell automatically — controlling their direction, spacing, and alignment — so you don't have to position each one manually.
**Best fits for:**
* Arranging a row or column of elements that should stay evenly spaced as you add, remove, or reorder them
* Wrapping a group of elements onto multiple lines when they don't fit in one row
* Adjusting the spacing of an entire group at once, instead of measuring gaps between individual elements
## Where to find it
Select a [Stack](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements) or [Cell](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/cells-and-grids), then open the Inspector panel > **Design** tab > **Auto layout**.
Like other layout settings, Auto layout can be set independently per device — switch Desktop/Tablet/Mobile using the device selector in the top bar before adjusting.
## Direction
Controls how children flow:
* **Vertical** — elements stack top to bottom.
*Example*: a banner's text content — heading, subheading, and a "Join now" link — stacked vertically.
* **Horizontal** — elements line up left to right.
*Example:* two buttons sitting side by side under a loyalty program heading — "Join now" and "Sign in" — arranged Horizontal in the same Stack.
* **Wrap** — elements flow left to right, and each one sits on the current row if it fits, or drops to a new row if it doesn't — instead of forcing everything onto one line (Horizontal) or one line each (Vertical).
*Example:* a "Shop our Instagram" Stack containing a Text element, a Button, and a Grid of photos. The Text and the Button are narrow enough to share the same row together — but the wider Grid doesn't fit next to them, so it flows onto its own row underneath, without you having to decide that manually.
## Distribute and Align
These two settings position children within the available space:
* **Distribute** — the alignment of elements **horizontally**.
* **Align** — the alignment of elements **vertically**.
| Option | What it does |
| ------------- | ------------------------------------------------------------------------------------------------------ |
| Align start | Bunches children toward the beginning (left for Distribute, top for Align) |
| Align center | Bunches children toward the middle |
| Align end | Bunches children toward the end (right for Distribute, bottom for Align) |
| Space between | *(Distribute only)* Spreads children with equal gaps between them, none at the outer edges |
| Space around | *(Distribute only)* Spreads children with equal space around each one, including at the outer edges |
| Stretch | *(Align only)* Stretches children to fill the full available height, instead of keeping their own size |
## Gap
Sets the space between children: **Column gap** and **Row gap**. Either enter the value you want in the Inspector panel, or drag the pink strip directly in the canvas.
## Padding
Controls the empty space between the boundary of the Stack (or Cell) and the elements inside it.
Adjust Padding uniformly on all sides, or set Top, Right, Bottom, and Left individually.
## Elements that opt out of Auto layout
By default, elements inside a Stack or Cell follow the automatic arrangement — you can't drag them to a custom spot. To position one exactly where you want instead, select it and change **Position** (Design tab) from **Relative** to **Absolute**.
Learn more: [Position elements with Relative, Absolute, or Sticky](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/position-elements-with-relative-absolute-or-sticky)
## FAQs
**What's the difference between Gap and Padding?**
Gap is the space between elements inside the Stack or Cell. Padding is the space between the Stack/Cell's own boundary and the elements inside it.
**Is dragging the pink strip different from typing a Gap value?**
No — they're two ways to do the same thing. Drag on the canvas for a visual adjustment, or type an exact value in the Inspector panel; both update the same Gap setting.
**Can I give one specific element more spacing than the rest, without changing the whole group's Gap?**
Yes — add Padding or Margin to that individual element directly, on top of the shared Gap.
**Can Auto layout settings be set differently per device?**
Yes — like other layout settings, switch device view first using the top bar selector, then adjust.
## Related articles
Stack elements
Build layouts with cells and grids
Group elements in a frame
Edit elements with the Inspector panel