Design
Jul 7, 2025
How to Use Stacks and Responsive Layouts
A Stack is a special frame that automatically arranges child elements to create a responsive layout, allowing users to maintain a natural layout that adapts to content without manual placement. In this article, we'll explain more about Stacks.
Uploaded by
Translated by
Contents
Table of Contents
This document was created to help Korean users learning Framer, who often face challenges due to a lack of Korean resources. We translated content from the official blog and added practical information. We hope this is helpful to those using Framer.
What is a Stack?
A Stack is a special frame that automatically arranges its child elements horizontally or vertically.
It is similar to CSS Flexbox or Figma's Auto Layout, making it excellent for content alignment and responsive layouts.
Advantages of Stack
No need to manually arrange elements
Automatically adjusts size and alignment based on content
Easy to implement responsive layouts
Layout naturally maintains even if text or images change
For instance, if the button text changes, the button width adjusts automatically, and if the text within a card increases, the whole area expands naturally.
3 Ways to Create a Stack
Add Stack properties to an existing frame
Select the frame and then set
Layouton the right
Create a Stack frame from scratch
Select
RoworColumnfrom the toolbar and drag
Group existing elements into a Stack
Select multiple elements, then
Right-click > Add Stackor use the shortcut (Mac:Option + Cmd + Return, Windows:Ctrl + Alt + Enter)
Exploring Stack Properties
Property | Description |
|---|---|
Direction | Horizontal/Vertical alignment |
Distribute | Automatically adjusts spacing between elements: Start/Center/End |
Align | Alignment based on vertical direction ( |
Gap | Set distance between elements, adjustable by dragging |
Padding | Specify inner margins for the Stack (each side can be set individually) |
Automatically Adjusting Stack Based on Child Elements
Using Shift + A or Right-click > Fit Content automatically adjusts the Stack frame to fit the size of its child elements.
Examples of Using Stack
Navigation Bar: Logo + Menu (Horizontal Stack)
Card Component: Image + Text + Button (Vertical Stack)
Button Configuration: Auto adjusts width according to text length (
Fit Content)
Responsive Layouts Made Easy
Applying Stack to the entire page makes it easy to make structural changes at each breakpoint.
By managing each section as a Stack, such as the Header, Body, and Footer, alignment and spacing changes become intuitive.
This content is a translated and adapted version of the Framer official document 'Stacks and Relative Positioning in Framer'.
