# Auto layout
> Let a frame place its layers in a row or a column, with the gaps and padding you set, so it grows and shrinks with its content.
Source: https://uxdeck.app/guide/auto-layout (checked against uxdeck on 16 October 2026)
Auto layout lines up a frame's layers for you. You choose a direction, the gap between layers and the padding around them, and the frame keeps them in place as you add, remove or resize anything inside. It is how a button grows with its label, a card with its text, and a page with its sections. It is also how your design turns into a page that works at any width.
## Add auto layout
1. Select a frame, or several layers you want to put in one.
2. Press ⇧A, or choose **Add auto layout** in the **Layout** section of the Design tab.
If the frame was empty, it starts as a **Vertical** column with a gap of 10 and padding of 10. If it already held layers, uxdeck reads where they sit and picks the direction, gap and padding that keep them close to where they were.
To take auto layout off, press ⌥⇧A, or the minus next to **Auto layout**.
> A **Stack** from the Insert menu (S) is a frame that already has auto layout: a column with a gap of 12 and padding of 16.
## Direction, gap and padding
- **Direction:** **Vertical** stacks layers top to bottom; **Horizontal** lines them up left to right.
- **Gap between items:** the space between each pair of layers.
- **Padding:** the space inside the frame's edges. Set **Horizontal padding** and **Vertical padding**, or press **Padding per side** to set each side on its own.
## Alignment
The 3×3 box places the layers inside the frame: top left, centre, bottom right, and so on. Double-click a cell to stretch the layers across the other direction; double-click again to stop.
Open **Layout options** for more:
- **Packed** keeps the layers together; **Space between** pushes them to the ends and shares the space between them. The gap then reads **Auto**.
- **Align text baseline** (rows only) lines text up on its baseline rather than its box.
- **Canvas stacking** decides which layer is drawn on top when layers overlap: **Last on top** (the default) or **First on top**.
## Wrap
On a horizontal frame, turn on **Wrap** and layers that no longer fit move to the next line, like words in a paragraph. A **Gap between rows** field appears for the space between lines. Wrap is how a grid of cards fits three to a row on a computer and one on a phone.
## How layers size themselves
Each layer's width and height has a mode, in the menu on the **W** and **H** fields:
- **Fixed:** stays the size you set.
- **Hug contents:** fits what is inside it. Text and auto layout frames can hug.
- **Fill container:** inside an auto layout frame, takes the space left in it. In a frame without auto layout, Fill pins the layer to both sides of its parent instead (see [Constraints](/guide/constraints)).
You can add a **Min** or **Max** width and height from the same menu, so a layer that fills never gets too narrow or too wide. Read more in **Hug, Fill and min/max sizes**.
## Take one layer out of the flow
Sometimes a layer should sit on top of the others: a badge in a card's corner, a close button. Select it and press **Ignore auto layout** (next to Rotation). It leaves the flow but stays in the frame; the other layers close the gap, and its constraints decide where it sits. Holding Ctrl while you drop a layer into an auto layout frame does the same.
## Edit several at once
Select several auto layout frames and change the direction, gap, padding or alignment: every one of them follows.
## Use your spacing variables
The gap and padding accept number variables, so a spacing scale you keep in **Variables** applies everywhere it is used. Padding takes a variable while all four sides are equal. Type = in the field to pick one.
## What it becomes on your site
Auto layout is written as flexbox when you publish or export, so the page keeps its structure at every width. If you prefer CSS words in the panels, set **Names in the panels** to **Developer** in Settings: Auto layout then reads Flexbox, and Hug reads fit-content.
## Catches
- **Fill needs a parent.** A layer on the canvas itself, outside any frame, cannot fill. Inside a frame without auto layout, Fill stretches the layer with the frame rather than sharing out space.
- **Ignoring auto layout turns Fill into Fixed.** Moving the layer to another frame, or taking auto layout off, brings it back into the flow.
- **Content wider than the frame** makes the frame hug when you add auto layout, so nothing is cut off.
- **The coach checks your spacing.** Gaps and padding that are not multiples of 4 (or one of your spacing variables) are flagged by the **Spacing scale** rule, with a one-click fix.
## Shortcuts
| Action | Keys |
|---|---|
| Add auto layout | ⇧A |
| Remove auto layout | ⌥⇧A |
| New stack | S |
Auto layout is on every plan.