Framer stacks are layout containers that arrange child elements automatically in a row or column with consistent spacing and alignment. They are Framer version of flexbox, letting you build responsive layouts that reflow on their own, so you spend far less time fixing breakpoints by hand.
Key Takeaways
- Stacks are auto-layout containers that handle direction, spacing, and alignment for their children.
- Nesting stacks inside stacks is how you build entire page sections cleanly.
- Gap controls spacing between items, while padding controls space inside the container.
- Distribution and alignment settings replace most manual positioning work.
- A stack-based layout adapts to screen sizes with far less breakpoint editing.
What a Stack Is and Why It Matters
A stack in Framer is a frame with auto-layout turned on. Instead of placing elements at fixed coordinates, a stack arranges its children in a defined direction, applies even spacing between them, and aligns them according to your settings. When you add, remove, or resize a child, the stack reflows everything automatically.
This matters because manual positioning does not scale. A page built with absolutely positioned elements breaks the moment content changes or the screen size shifts. A page built with stacks adapts on its own. For anyone learning the tool, understanding stacks early is the single biggest leap in productivity, which is why our Framer beginner tutorial introduces them so prominently.
If you have used flexbox in CSS, stacks will feel familiar. If you have not, the mental model is simple: you tell the container how to arrange things, and it does the work.
Stack Direction: Horizontal and Vertical
Every stack has a direction. A vertical stack arranges children top to bottom, which suits page sections, content columns, and lists. A horizontal stack arranges children left to right, which suits navigation bars, button groups, and card rows.
You set direction with a single control in the layout panel. The power comes from combining the two. A typical section is a vertical stack containing a heading, a paragraph, and a horizontal stack of buttons. The outer stack handles vertical rhythm, the inner stack handles the button row.
Changing Direction by Breakpoint
One of the most useful tricks is switching stack direction on smaller screens. A horizontal row of three feature cards on desktop can become a vertical column on mobile by changing the stack direction on the phone breakpoint. The content stays identical. Only the arrangement changes, and Framer handles the transition.
Gap, Padding, and Spacing
Two settings control spacing in a stack, and confusing them is a common beginner mistake.
Gap is the space between child elements inside the stack. Set the gap once and every item is evenly spaced. If you have a column of cards with a 24 pixel gap, all the cards sit 24 pixels apart, and adding a new card keeps that rhythm.
Padding is the space inside the stack, between its edge and its children. A section stack might have 80 pixels of vertical padding and 64 pixels of horizontal padding, creating breathing room around the content.
Building a Spacing System
Professional layouts use a consistent spacing scale rather than random numbers. Pick a base unit, often 8 pixels, and use multiples: 8, 16, 24, 32, 48, 64, 80. Apply these values to gaps and padding throughout the site. The result is visual harmony that visitors feel even if they cannot name it.
Alignment and Distribution
Inside a stack, alignment and distribution control where children sit. Alignment positions children along the cross axis. In a vertical stack, that means left, center, or right. Distribution controls how children share space along the main axis.
Common distribution options include packing items together at the start, centering them, or spacing them apart so the first and last items hug the edges. A navigation bar is a clear example: a horizontal stack with the logo on the left and links on the right, achieved with a space-between distribution.
These settings replace almost all manual nudging. Once you trust alignment and distribution, you stop dragging elements pixel by pixel and start describing the layout you want.
Nesting Stacks to Build Sections
Real pages are stacks inside stacks. This nesting is how you build complex layouts that stay organized and responsive.
Consider a typical feature section. The outer container is a vertical stack with section padding. Inside it sits a vertical stack for the heading and intro text. Below that is a horizontal stack holding three cards. Each card is itself a vertical stack containing an icon, a title, and a description.
That is four levels of nesting, and every level handles its own spacing and alignment. When you edit the heading text or swap a card, the whole section reflows correctly because each stack does its job. This component-like thinking pairs naturally with reusable elements, covered in our Framer components guide.
Keeping the Layer Tree Clean
Name your stacks as you build. A layer tree full of Stack, Stack, Stack is hard to navigate. Names like Section, Content, Card Row, and Card make a complex page easy to manage and easy to hand off.
Sizing: Fixed, Fill, and Fit
Each element in a stack has sizing options that determine how it occupies space. Understanding the three modes is essential.
- Fixed sets an exact width or height in pixels. Use it for elements that must stay one size, such as an icon or a logo.
- Fill tells the element to stretch and occupy available space. Three cards set to fill in a horizontal stack split the row evenly between them.
- Fit sizes the element to its content. A button set to fit width is exactly as wide as its label plus padding.
Mixing these modes is how responsive layouts come together. A common pattern is a horizontal stack with a fixed-width sidebar and a fill-width main area. The sidebar holds its size while the content area absorbs whatever space remains.
Responsive Layout With Stacks
Framer supports breakpoints for desktop, tablet, and phone. Because stacks already reflow, you make fewer manual adjustments at each breakpoint than you would with fixed positioning. Often a layout built well on desktop needs only minor tweaks on smaller screens.
The typical mobile adjustments are: switch horizontal card rows to vertical stacks, reduce section padding so content is not squeezed, and bump font sizes for readability. Because the structure is stack-based, these changes are quick and predictable.
A practical rule is to design desktop first, confirm it works, then move to tablet and phone and fix only what genuinely breaks. Resist rebuilding sections per breakpoint. If a layout needs a full rebuild on mobile, the desktop structure was probably too rigid. For broader guidance, see our notes on web design best practices.
Common Stack Mistakes to Avoid
A few habits trip up newer Framer users. Avoiding them keeps your projects clean.
The first is overusing fixed sizing. When too many elements have fixed widths, the layout cannot adapt and breaks on smaller screens. Default to fill and fit, and reserve fixed for elements that truly need it.
The second is inconsistent spacing. Random gap and padding values make a site feel slightly off even when nothing is obviously wrong. Commit to a spacing scale and apply it everywhere.
The third is shallow structure. Trying to build a complex section in one flat stack leads to alignment fights. Embrace nesting. More small, well-named stacks are easier to manage than one overloaded container.
The fourth is ignoring the layer tree. An unnamed, disorganized tree slows every future edit. Spend the few seconds it takes to name things as you go.
Want a Framer site built on a clean, responsive layout system from day one? Our team designs Framer websites with stack-based structures that stay easy to maintain and update. See options on our pricing page or contact us to get started.
Frequently Asked Questions
What is the difference between a stack and a frame in Framer?
A frame is a basic container. A stack is a frame with auto-layout enabled, meaning it arranges its children automatically by direction, gap, and alignment instead of relying on fixed positioning.
How is gap different from padding in a Framer stack?
Gap is the space between child elements inside the stack. Padding is the space inside the stack between its edge and its children. Gap spreads items apart, padding creates a margin around them.
Can stacks make my Framer site responsive automatically?
Stacks reflow their children automatically, which removes much of the manual breakpoint work. You still make small adjustments per breakpoint, but far fewer than with fixed positioning.
Should I always design with stacks in Framer?
For almost all page layouts, yes. Stacks keep designs organized, consistent, and responsive. Fixed positioning is best reserved for small decorative elements that do not affect the overall layout flow.