Stacks are one of the most powerful layout tools in Framer. They let you arrange elements automatically in a row or column — and they adapt when content changes. Think of them like Flexbox, but visual and drag-and-drop.

Why Stacks Matter in Your Template

Almost everything in your Framer template uses Stacks. Navigation bars, card rows, feature sections, footers — all of them use stacks to keep elements aligned and evenly spaced. Understanding stacks means you can move things around confidently.

Types of Stacks

Horizontal Stack

Arranges children side by side, from left to right. Great for navbars, button groups, icon rows, and card grids.

Vertical Stack

Arranges children one above the other. Great for sections, feature lists, and any top-to-bottom content flow.

Identifying a Stack

1. Click on any section of your template on the canvas.

2. Look at the right panel — if you see a "Stack" section with direction, gap, and alignment controls, it's a Stack.

3. You can also look in the Layers panel — stack layers have a slightly different icon than plain frames.

💡 Tip: To convert a regular Frame to a Stack, select it and click the "Stack" option in the right panel under Layout. You can switch between horizontal and vertical at any time.

The Key Properties of a Stack

• Direction — Horizontal (row) or Vertical (column)

• Gap — Space between each child element

• Padding — Space inside the stack, between the edge and children

• Alignment — How children align along the cross-axis (e.g., center, start, end)

• Distribution — How space is distributed: start, center, end, space-between