# Stack widgets with spacing and padding

> Line up widgets in a wireframe as a stack, so they keep even spacing and padding as you edit.

Source: https://mockflow.com/docs/stack-widgets-in-a-wireframe

A stack lines up widgets in a row or a column with the same space between them. Add, remove or resize a widget and the others move to make room, so the screen stays tidy as you edit. Stacks are the auto layout of the wireframe, and they carry over as auto layout when you export a screen to Figma.

![Shift+clicking four scattered filter chips in a recipe app wireframe, choosing Stack them to line them up, then opening Properties and raising Spacing to space them out](https://assets.mockflow.com/docs/media/86f0998364c84bc2be0ad3dc7075c4bc.webp)

## Stack widgets

1. Open the Wireframe for editing: select it and click **Edit wireframe**.
2. Select the widgets to stack. Shift+click each one, or drag a selection box around them.
3. Click **Stack them** in the bar above the selection, or press Shift+A.

MockFlow reads how the widgets sit. Widgets placed one above another become a column, and widgets placed side by side become a row that wraps onto the next line when it runs out of space.

A container widget, such as a card, can line up its own contents too: select it and click **Line up contents** (Shift+A).

## Set spacing and padding

Select the stack and click **Properties** (Enter) in the bar above it. The **Auto layout** section sets how the stack arranges its widgets.

![The properties of a stack of filter chips, with Arrange, Spacing and Padding numbered in the Auto layout section](https://assets.mockflow.com/docs/media/60a00194e9cf473a9d4a0e9a0a3e1c24.webp)

1. **Arrange:** **Vertical**, **Horizontal**, **Wrap** or **Free**.
2. **Spacing:** the gap between widgets, in pixels.
3. **Padding:** the space between the stack's edge and its widgets.

Click + or − to change a value by 1, or hold Shift to change it by 10.

## Turn a stack off

Select the stack and click **Free layout**, or press Shift+Alt+A (Shift+Option+A on Mac). The widgets stay where they are, and you can move each one freely again.

> **Tip** Screens generated with AI often use stacks already, for example for rows of chips or buttons. See [Generate and edit screens with AI](/docs/generate-wireframes-with-ai).