Layout & Design

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)

Joseph

8:05

88K views

Oct 22, 2024

About this lesson

Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.

Stacks not only unlock relative positioning — but also new sizing options that can make elements fill their parent — or make a parent frame automatically fit its children.

In this lesson, we’re going to look at how Stacks and Relative positioned layers work, how they make our lives easier, and of course when to use them.

If you’re already familiar with auto-layout in Figma or Flexbox in CSS, you’ve got a head start — but either way, you’re in the right place because we’re going to start with the basics.

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=0s Intro

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=9s What stacks do and why they matter

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=20s Stacks and relative positioning

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=37s Turning frames into stacks

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=72s Relative positioning behavior in stacks

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=115s Common use cases for stacks

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=145s Fitting stacks to content

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=182s Creating stacks from scratch or wrapping layers

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=235s Default stretching behavior for new stacks

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=256s Stack properties: direction and distribution

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=326s Adjusting gaps between elements

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=355s Aligning elements on the cross axis

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=371s Using padding effectively

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=404s Wrapping elements in stacks

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=422s Applying stack layouts to breakpoint frames

https://www.youtube.com/watch?v=jQoR0dQQ9XY&t=465s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00Stacks allow us to create rows or 0:02Columns of elements that automatically 0:04align distribute and spread themselves 0:07out within the available space which not 0:10only means less tedious scaling and 0:11repositioning for us on the canvas but 0:13also lets us build bulletproof layouts 0:16that can flex and adapt when things in 0:18the browser change size Stacks not only 0:20unlock relative positioning but also new 0:23sizing options that can make elements 0:24fill their parent or make a parent frame 0:27automatically fit its children in this 0:30lesson we're going to look at how stacks 0:31and relative position layers work and 0:34how they make our lives easier and of 0:36course when to use them if you're 0:38already familiar with auto layout in 0:39figma or flexbox in CSS you've got a 0:42head start but either way you're in the 0:44right place because we're going to start 0:46with the basics let's jump 0:49[Music]0:51in in the first lesson of this chapter I 0:53started to get you thinking in frames 0:56now I want to get you thinking in Stacks 0:59first things first 1:00a stack is a frame but a frame with a 1:03special layout property applied you can 1:06select any frame like this minimalist 1:08nav bar which has some absolute position 1:10text layers floating around in it and on 1:13the properties panel we can click to add 1:15a layout now this Frame is considered a 1:19stack and automatically arranges its 1:21direct child layers in either a vertical 1:23column or a horizontal Row in this case 1:26a horizontal row which framer guessed 1:28automatically based on the arrangement 1:30of layers you'll notice now when I try 1:32to move one of these text boxes it 1:34either snaps back into place or switches 1:37places with its siblings in fact nudging 1:40with the arrow keys on the keyboard 1:41changes the Sorting too what you're 1:44seeing here is the behavior of layers 1:46set to relative positioning relative 1:48layers go with the flow of the stack 1:51respecting the available space and the 1:53space occupied by their sibling layers 1:55the stack itself is in charge of the 1:57gaps padding and alignment 2:00the content flows in the same order it's 2:03arranged on the layers panel pretty much 2:05anytime you see a set of elements evenly 2:07spaced horizontally or vertically you're 2:10probably looking at an opportunity to 2:12use a stack the text and CTA button in a 2:16hero section could be a vertical stack 2:19content within a card could be a stack 2:21and a row of those very cards could be 2:24another stack in fact this navigation 2:26bar has a stack for the logo a stack for 2:29the links 2:30and the whole thing itself is a stack 2:33even a frame with a single child layer 2:35like a button could be a stack to keep 2:37the text neatly centered and padded 2:39automatically even if the text changes 2:42cuz Stacks have the unique ability to 2:44automatically fit the content within 2:46them which is great when you need the 2:48size of the child layers to be in charge 2:51in fact a little trick to instantly turn 2:53a frame into a stack and fit to its 2:55content is to rightclick and choose fit 2:58content or or press shift a on the 3:01keyboard the bottom line is that Stacks 3:04are perfect when you want elements to 3:05flow in a single Direction with 3:08consistent spacing alignment and 3:10distribution and they also unlock some 3:12powerful sizing options for Designing 3:14fluid layouts which we're going to dig 3:16into in the next lesson before we dig 3:19into the properties of a stack I want to 3:20show you a couple other ways to create 3:22them if you know you're going to need 3:24one before you've even drawn a frame you 3:26can draw a new frame with a vertical or 3:28horizontal stack layout already applied 3:31just click the layout button on the 3:32toolbar choose rows or columns then drag 3:36to draw your new stack on the canvas 3:39it'll come with a couple of placeholder 3:41layers but you can do with those what 3:42you please you can also wrap a set of 3:44selected layers in a stack by right-3:46clicking and choosing add stack or with 3:50the shortcut option command return on a 3:52Mac Control Alt Enter on a PC you'll 3:56notice the new stack that gets created 3:57automatically stretches to fill the 3:59width its parent and fit the height of 4:01its children this is actually a behavior 4:03that we changed somewhat recently 4:04following a bunch of requests to make 4:06this method more responsive out of the 4:08box you'll be glad about these defaults 4:10when you spend more time designing 4:11responsive layouts let's head back to 4:13our Navar example and dig into the 4:15properties of a stack the first and most 4:18fundamental property of a stack is the 4:20direction do we want things to flow 4:22horizontally or vertically we consider 4:25this the main axis of the stack you can 4:28think of the main axis as a a stick you 4:30can think of the child layers as little 4:32marshmallows who doesn't love 4:34marshmallows then we can decide how 4:36elements are distributed across the 4:37available space along the main axis are 4:40the marshmallows at the start of the 4:42stick the center of the stick or the end 4:44of the stick you may be wondering why 4:47start and end and not left and right 4:50that's because the terms start and end 4:52always make sense no matter which 4:54direction the stat goes it's web 4:56terminology the next three options give 4:59us different ways to distribute across 5:01all the available space space between 5:04distributes the space between each 5:06element with no space on the sides space 5:09around puts the same amount of space 5:11around each element which means the 5:14space actually doubles up between 5:15side-by-side elements and space evenly 5:19which distributes the exact same amount 5:21of space between and around each element 5:25all equal gaps With Start Center and end 5:27we have a property to control the gap 5:30manually and we also get draggable 5:32handles on the canvas to visually adjust 5:34the gaps but you'll notice that every 5:36element in the stack always shares the 5:39same Gap if you have a scenario where 5:41two or more layers need to have a 5:43different Gap than the rest what do we 5:45do we just wrap them in their own stack 5:47easy as that back to our first example 5:51we looked at how the distribute property 5:52slides things along the main axis but we 5:55also have a property to determine how 5:57things are aligned in the other 5:59direction 6:00we call this perpendicular axis the 6:02cross axis and we can choose Start 6:05Center or end again web terminology that 6:09makes sense in both directions the last 6:12property is padding which is an 6:13invisible cushion of space around the 6:15inside of the stack you may have noticed 6:18that when I set distribute to start or 6:20end our layers went right up to the edge 6:23this is where a little bit of padding 6:24can make a big difference padding is 6:26also extremely helpful when combined 6:28with a height or width that's set to fit 6:30contents like the button we looked at 6:32earlier since the bounds of the stack 6:34would otherwise clamp down too tightly 6:36around the children by default padding 6:39affects all sides equally but we do have 6:40a toggle to show separate values for 6:43each 6:43side you'll also find that if you have 6:46too many items to fit in the available 6:48space they'll continue to run on and 6:50potentially overflow for this we have 6:53wrap when there's no more room in a line 6:56the elements are moved to the next row 6:58or column keeping elements flowing 7:00without getting cut off another way to 7:03use Stacks to make life easier is to 7:04apply a stack layout to an entire 7:06breakpoint frame similar to our layers 7:09in our navigation earlier this allows us 7:11to drag to rearrange entire sections of 7:13our pages and means we can control 7:16padding and gaps between sections we'll 7:19talk about this more in the next lesson 7:20but with the stack layout applied we can 7:22also change the height of this brake 7:23point to fit content so it'll 7:26automatically grow or Shrink as we add 7:28remove and resize content so you can see 7:31how Stacks can be super helpful at the 7:33most macro and the most micro level of 7:36your layouts saving us time making our 7:38layouts more consistent and keeping them 7:40that way even if the size of things 7:42change but this is really just the 7:45beginning things get even more powerful 7:47when we use the new sizing options that 7:49Stacks unlock for us which is exactly 7:51what we're learning in the next lesson 7:53see you there

TeachesStacks Sizing

Also coversAbsolute Positioning Breakpoints Frames Keyboard Shortcuts Links Responsive Design Spacing

Watch on YouTube ↗

‹ CMS Update: Previous / Next Items, Hide & Show Fields, and More

The Framer Fall Event in :60 ›