Ever tried to align stuff on a Framer page… only to end up rage-clicking everything in sight?
Yep. We’ve been there.
That’s probably because you’re missing the building block that keeps modern web layouts from falling apart:
Stacks.
Think of Stacks Like Bento Boxes
You know those neat Japanese lunch boxes with separate compartments?
One for sushi, one for tempura, one for sauce.
Clean. Organized. Everything in its place.
That’s exactly what Stacks do in Framer.
They organize your content into either rows (horizontal stacks) or columns (vertical stacks). And you can even nest them inside one another like—surprise—little boxes inside big boxes.
Why You Should Use Stacks in Framer
Because modern websites aren’t fixed-width and rigid anymore.
They’re fluid.
They need to look good on a 5-inch phone and a 40-inch monitor.
Picture this:
You’ve built a testimonials section with two rows, each containing three testimonials.
Business starts booming, and now you want to add a third row.
With stacks, it’s effortless. Add the new row, and everything above and below adjusts like magic—no messy shifts, no broken layouts.
That's what stacks help you do!
Stacks let your content flow.
They stretch, shrink, and re-align—whatever it takes to stay clean and responsive.
No breaking. No weird overlapping. Just smooth layouts.
How Do Stacks in Framer Actually Work?
Here’s the short version:
A stack wraps elements (text, images, buttons, etc.) inside a container
It organizes them vertically or horizontally
You can align items left, right, or center; space them out; add gaps; even auto-resize based on content
You can also have child stacks inside parent stacks, like nesting folders inside folders
Instead of manually adjusting every element, Framer’s layout engine does the heavy lifting.
Think of your layout like a table made up of rows and columns.
Let’s break down this section step by step:
Start with one parent stack
This stack arranges two main columns side by side:
Column 1: Contains the title and an image
Column 2: Contains a subtitle and a description section
Inside Column 1:
There are two items stacked vertically (in rows):
Row 1: The title
Row 2: The image
Inside Column 2:
This column is divided into two sub-columns:
Sub-column 1: Has three items, stacked vertically (3 rows)
Sub-column 2: Has two items, also stacked vertically (2 rows)
Each level of this structure uses stacks to organize content cleanly and responsively—just like building a layout with rows and columns in a spreadsheet.
Step-by-Step Guide to Building a Stack-Based Layout in Framer
1. Start with a fresh canvas
Open Framer and add a new Frame using the F key or the Frame tool. This will act as your page container.
2. Turn the frame into a stack
Select the frame. In the right-hand sidebar under "Layout", choose either Vertical (for top-to-bottom flow) or Horizontal (for side-by-side layout).
3. Add your content
Drag in elements like text, buttons, or images into the stack. They’ll automatically align based on the stack direction—no manual positioning needed.
4. Adjust spacing and alignment
Still in the "Layout" section of the sidebar, tweak the gap, alignment, and distribution settings to control how elements are spaced and aligned inside the stack.
5. Create nested stacks for structured layouts
To build more complex sections, nest stacks within stacks.
For example:
Add a new frame inside your main stack
Convert it into a Horizontal stack
Inside it, place:
A Vertical stack with a heading and paragraph
An image or icon next to it
This setup works great for content blocks like feature sections or testimonials.
6. Enable auto-sizing
In the “Size” section of the right-hand sidebar, you can control how your stack or any element resizes within its parent frame. There are four main sizing options, and each behaves differently based on the layout needs.
Hug (also called Fit to Content)
This means the element will size itself based on its internal content.
This is especially useful for dynamic layouts.
A good practice is to set the height to Hug so that the section adjusts automatically based on the screen size and the amount of content inside.
Fill
This tells the element to expand and take up all the available space inside its parent container.
This is helpful when you want to evenly distribute elements across a section.
Relative
This allows you to assign a percentage value to the width or height.
The element will then scale proportionally based on the size of its parent.
This is useful for responsive layouts where consistent ratios matter.
Fixed
This lets you define an exact size in pixels.
The element will remain the same size no matter what device or screen it’s viewed on.
While this might work in some cases, it’s usually better to avoid fixed sizing if you want your layout to remain flexible and responsive.
7. Repeat for each section
Structure your full page by repeating this pattern.
Your entire website becomes one large vertical stack, made up of nested stacks for each section—hero, about, features, testimonials, footer, and so on.
TL;DR — Why Use Stacks?
They adapt to all screen sizes
They save you from manually aligning everything
They’re the backbone of clean, responsive design
They help you build modular layouts that are easy to update later
Want to Go Deeper?
We’ve curated a list of the best beginner-friendly tutorials and tools here:
Need Help With Your Layout?
We help UI/UX folks untangle the Framer mess daily.
Book a call with us — let’s fix your layout together.
