# Stack elements
A Stack groups multiple elements into a container that arranges them automatically — horizontally or vertically — keeping them from overlapping or drifting apart as the screen resizes.
**Best fits for:**
* Lining up a row or column of elements (icons with labels, a feature list, a button group) that should reflow automatically
* Keeping consistent spacing between elements without re-measuring each time you add or remove one
* Building a layout where hiding one element lets its neighbors fill the gap automatically
## Why use a Stack
Positioning elements manually means re-checking their position on every device, every time something changes. A Stack removes that maintenance work — set the Direction and spacing once, and Auto layout keeps every child correctly placed as you add, remove, reorder, or resize elements, without touching anyone else's settings.
You might find this helpful: [Check and adjust mobile view](https://docs.foxecom.com/foxify-app/guides/build-your-store-pages/check-and-adjust-mobile-view)
## How to create a Stack
1. Click the element you want in the Stack.
2. Hold **Shift** and click the other elements you want to add.
3. Choose **Stack vertical** or **Stack horizontal** from the toolbar that appears. You can change this to **Wrap** afterward via Auto layout in the [Inspector panel](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/inspector-panel).
Shortcut: `Cmd+Enter` (Mac) / `Ctrl+Enter` (Windows) stacks the selected elements.
## Add or remove elements from a Stack
* **Add an element:** drag it over the Stack until a blue indicator appears, then drop it in.
* **Remove an element without unstacking:** select it and drag it out.
* **Unstack entirely:** select the Stack and click **Unstack**, or use `Cmd+Option+Backspace` (Mac) / `Ctrl+Alt+Backspace` (Windows).
## How elements are arranged inside a Stack
Once elements are in a Stack, their position is controlled by **Auto layout** — not manual dragging. Direction, Distribute, Align, Gap, and Padding all live in the Inspector panel > **Design** tab > **Auto layout**.
Learn more: [Arrange elements automatically with Auto layout](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/arrange-elements-automatically-with-auto-layout)
## Constraints and Stack — what applies where
By default, you can't apply Constraints to an element that's a direct child of a Stack — Auto layout controls its position instead. You *can* apply Constraints to the Stack itself, if it sits inside a Frame or Section.
There's an exception: if you change a Stack child's own **Position** away from its default (see below), it gets real positioning control via Inset — effectively working like Constraints, even though it's inside a Stack.
Learn more: [Control element position with constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints)
## Freeing an element from the Stack's flow
By default, an element inside a Stack follows the Stack's direction and can't be dragged freely. Setting that element's **Position** to **Absolute** (or another non-default value) frees it from the Stack's flow — it gets its own **Inset** controls (top/right/bottom/left, in px) to position it manually, the same way Position works on any other element.
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
**Can I add more than one element to a Stack at once?**
Yes — hold Shift while selecting multiple elements before stacking, or drag additional elements in one at a time afterward.
**Does removing an element from a Stack delete it?**
No — dragging an element out of the Stack just detaches it; it isn't deleted.
**Can an element inside a Stack ever be manually positioned?**
Yes — change its Position to Absolute (or another non-default value) to free it from the Stack's automatic flow and position it manually via Inset.
**Why does a Stack make responsive design easier than a Frame?**
Because a Frame requires you to position and constrain each child individually, on every device, and re-check that whenever something changes. A Stack's Auto layout recalculates every child's position automatically, so hiding, adding, or reordering elements doesn't require touching anyone else's settings.
## Related articles
Group elements in a frame
Build layouts with cells and grids
Add and edit elements