# Stack elements
Line up elements in a neat row or column, like a button group, icons with labels, or a heading with text and a button, and keep the spacing even on every device without adjusting each element.
## When to use
Best fits for:
* **Button groups**, like "Shop now" and "Learn more" side by side.
* **An icon next to a short line of text**, like "Free shipping on orders over $100" under the buy button.
* **Text blocks**, like a heading, a short paragraph, and a button stacked in a hero or card.
* **A headline with small images between words,** where hiding or adding one element should make the others move to fill the space.
### Stack vs. Grid vs. Frame
## Create a stack
### From elements already on your page
1. On the canvas, select the first element.
2. Hold **Shift** and select the other elements.
3. In the toolbar, select **Stack vertical** or **Stack horizontal**. Or press **⌘ ↵** (Mac) / **Ctrl ↵** (Windows).
### As an empty stack
Select a section, then select **More (⋮)** > **Add stack**. Drag elements into it afterwards.
## Common setups
| You want… | Direction |
| ------------------------------------------ | ---------- |
| A button group | Horizontal |
| Icons with labels | Horizontal |
| A hero text block | Vertical |
| A headline with small images between words | Wrap |
Set these in the Inspector under **Design** > **Auto layout**. See [Arrange elements automatically with Auto layout](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/arrange-elements-automatically-with-auto-layout).
## Add or remove elements
* **Add:** drag an element over the stack until a blue line appears, then drop it in.
* **Remove:** select the element and drag it out of the stack. The element isn't deleted.
* **Unstack:** select the stack and select **Unstack**, or press **⌘ ⌥ ⌫** (Mac) / **Ctrl Alt Backspace** (Windows). The elements stay on your page.
## Place one element freely inside a stack
Elements in a stack follow the stack's direction, so you can't drag them to any position, and **Constraints** don't apply to them.
To place one element freely, for example a "Sale" badge on top of a product image:
1. Select the element.
2. In the **Design** tab, set **Position** to **Absolute**.
3. Use **Inset** (top, right, bottom, left, in px) to place it.
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.
#### Why is a stack better than a frame for mobile?
In a frame, you position each element yourself and check it on every device. A stack repositions elements automatically, so hiding, adding, or reordering one doesn't break the layout.
#### Can I put a stack inside another stack?
Yes. For example, use a vertical stack for a card, with a horizontal stack inside it for the buttons.
## Related articles
Group elements in a frame
Build layouts with cells and grids
Add and edit elements
Check and adjust mobile view