Layout & Design

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7)

Joseph

7:37

65K views

Nov 4, 2024

About this lesson

Stacks not only allow us to create rows or columns of perfectly aligned and distributed elements — they also unlock two of the most powerful sizing modes in Framer… “Fill” and “Fit Content”.

Since relative positioned layers are aware of their siblings and push against one another, we can use “Fill” sizing to determine how they scale to occupy the available space — ensuring our designs are fluid and responsive across different screen sizes and devices.

On the flip side, Stacks can also be set to “Fit content” to automatically snug themselves around their child elements.

In this lesson, we’re going to dig deep into how these two sizing modes work — along with how and when to use them.

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

https://www.youtube.com/watch?v=5DYSoL26oeM&t=5s Fill and fit content sizing modes

https://www.youtube.com/watch?v=5DYSoL26oeM&t=15s How fill sizing works in stacks

https://www.youtube.com/watch?v=5DYSoL26oeM&t=22s Using fractional units (FR)

https://www.youtube.com/watch?v=5DYSoL26oeM&t=41s FR math examples

https://www.youtube.com/watch?v=5DYSoL26oeM&t=61s Mixing fill and fixed sizes

https://www.youtube.com/watch?v=5DYSoL26oeM&t=68s Benefits of fill sizing for fluid layouts

https://www.youtube.com/watch?v=5DYSoL26oeM&t=71s Introduction to fit content

https://www.youtube.com/watch?v=5DYSoL26oeM&t=86s How fit content works

https://www.youtube.com/watch?v=5DYSoL26oeM&t=112s Fit content with padding

https://www.youtube.com/watch?v=5DYSoL26oeM&t=133s Fit content shortcuts and defaults

https://www.youtube.com/watch?v=5DYSoL26oeM&t=154s Avoiding conflicts between fill and fit

https://www.youtube.com/watch?v=5DYSoL26oeM&t=175s 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 not only allow us to create rows 0:02or Columns of perfectly aligned and 0:04distributed elements they also unlock 0:06two of the most powerful sizing modes in 0:08framer fill and fit content since 0:12relative position layers are aware of 0:13their siblings and push against one 0:15another we can use fill sizing to 0:17determine how they scale to occupy the 0:19available space ensuring our designs are 0:21fluid and responsive across different 0:23screen sizes and devices on the flip 0:26side Stacks can also be set to fit 0:28content to auto automatically snug 0:31themselves around their child elements 0:33in this lesson we're going to dig deep 0:35into how these two sizing modes work 0:37along with how and when to use them 0:39let's jump 0:41[Music]0:42in in the previous lesson we created a 0:45stack of text boxes for a minimalist 0:47navbar in this case we were concerned 0:49with the alignment and distribution of 0:51the elements but we didn't have to worry 0:53about the size because the size was 0:55determined by the text itself but this 0:58time let's say we're Crea a stack of 1:01rectangles what size is right for each 1:03one well that depends if we know we want 1:07the rectangles to share the available 1:08space equally with a gap between each 1:10one and some padding around the sides 1:13well we would have to do some math to 1:15figure out the right size for each box 1:18or we could have framer figure it out 1:20for us this is where fill sizing comes 1:23in which again is unlocked on relative 1:26positioned layers within a stack or grid 1:28layout when we set the the width or 1:30height of a layer to fill that layer 1:32takes a look at the available space 1:34considering the space occupied by 1:36sibling layers specifically sibling 1:39layers that are also set to relative 1:41positioning absolute layers don't count 1:43but we'll come back to this we decide 1:46how much of the available space we want 1:48the layer to fill by using fractional 1:50units or F fr the magic of fractional 1:53units is the math they do for us when 1:55multiple sibling layers are set to fill 1:58all we need to do is decide what portion 2:01of the available space should go to each 2:03layer let's nerd out on how the math 2:05works for a second let's say we have 2:07three relative position siblings in a 2:10horizontal stack each set to one FR 2:13essentially each one of these frames is 2:15requesting one portion of the space 2:17please but how big is a portion well in 2:20this case we have one portion plus one 2:23portion plus one portion for a total of 2:25three that are being requested which 2:27makes each portion one out of 2:30or 2:311/3 sure enough each frame set to 1fr 2:35gets a 1/3 share of the available space 2:38so what happens if we increase a frame 2:40to 2fr intuitively you may have guessed 2:43that it would become twice as big as the 2:45frame set to 1fr and you'd be right to 2:48unpack that math a bit further there are 2:50now a total of four fractional units 2:52being requested 2fr plus 1R plus 1 FR or 2:57four portions of available space which 2:59means each of these two frames get one 3:01of those two fours being set to one FR 3:04and this Frame gets two fours being set 3:07to two FR it's that simple just remember 3:10that an FR is a fraction of the 3:12available space and rather than dividing 3:14by the number of layers it divides by 3:16the total number of FR units of all the 3:18sibling layers added up and the most 3:21amazing part is that everything is 3:22recalculated in real time if the amount 3:25of available space changes making this 3:27an incredibly powerful tool for creating 3:29fluid layouts that adapt responsibly to 3:31different viewport sizes another thing 3:33to keep in mind is that if one of the 3:35sibling layers is set to a fixed size 3:38that'll eat into the available space by 3:40a fixed amount if I set this third frame 3:42to a fixed width there's technically now 3:45less available space remaining since 3:47this fixed frame ain't going to budge 3:50the remaining two frames set to 1fr 3:51share that remaining space equally with 3:54each taking one of the total of two 3:57fractional units of available space or 4:001/2 so fill sizing is amazing when we 4:03want child layers to expand to fill the 4:05available space within their parent 4:07frame now let's look at exactly the 4:10opposite another superpower of stacks is 4:13that they can automatically snug 4:14themselves down to fit around their 4:16child layers using a width or height of 4:19fit content we touched on this in a 4:21previous lesson a couple of times but 4:24let's unpack it a bit more for those 4:26situations where you want a frame to 4:27wrap itself around the bounds of its 4:29child layers like a card for example we 4:32can choose fit content which sets the 4:35value to Auto since this Dimension now 4:37will set itself completely automatically 4:40if the frame we're applying this to 4:41doesn't have a layout applied a stack 4:43layout will get applied 4:45automatically why is that well it has to 4:48do with what content really means when 4:50we say fit content See only child layers 4:53set to relative positioning are 4:55considered part of the flow of content 4:57and remember relative layers are 4:59specific to the children of stacks and 5:01grids then we can use padding to push a 5:04little extra space outward from the 5:06child layers and from now on it'll 5:08automatically adjust when child layers 5:10are added removed or change size a great 5:14little trick to instantly turn a frame 5:15into a stack and fit its height and 5:18width to its content is to rightclick 5:20and choose fit content or press shift a 5:24on the keyboard and it now works on 5:26component instances and text boxes too I 5:29me mentioned in the previous lesson you 5:30can use fit content for the height of an 5:32entire breakpoint too so you never have 5:34to worry about making more space or 5:37getting rid of extra space manually ever 5:39again it's also worth pointing out how 5:41fit content works for text boxes 5:43themselves too it really comes in handy 5:46for example if the width of a text box 5:48can Flex we usually want to allow the 5:51height to adapt to the text as it 5:53reflows and setting the height to fit 5:55content does just that in general you 5:58may often find yourself setting the 6:00height of a stack to fit its content 6:02since we have an unlimited amount of 6:04vertical space on the web while setting 6:06the width to fill in order to keep 6:08things flexible for varying viewport 6:11sizes in fact these settings are the 6:13defaults when you use the menu item or 6:15keyboard shortcut to add a stack around 6:17your 6:18selection while we're here I think it's 6:20important to point out that I've just 6:22taught you about two sizing modes that 6:24can directly conflict with one another 6:27if the parent is set to fit content 6:29there needs to be a child layer with an 6:30explicit size to support it and vice 6:33versa if a child layer is going to fill 6:34its parent the parent needs to have a 6:36size of its own to support it someone 6:39has to be in charge if you do find 6:41yourself trying to do the impossible and 6:43tell a child layer to fill its parent 6:45while telling the parent to fit its 6:47child framer tries to help by 6:48automatically switching the necessary 6:50layers to fix size to avoid the layout 6:53collapsing in on itself you'll get a 6:55little warning on the screen when this 6:56happens and you can take a moment to 6:58re-evaluate your decision 7:00so now you know how to make the width 7:02and height of elements dynamically fill 7:04available space or fit the space 7:07occupied by their children these are the 7:09building blocks that fluid responsive 7:11layouts are made of to say that 7:13mastering these Concepts is key would be 7:16an understatement take your time and 7:18practice building some simple layouts 7:20first before you go too crazy and watch 7:23this video a few times if you need to 7:25I'll see you in the next one

TeachesSizing Stacks

Also coversBreakpoints Components Frames Grids Keyboard Shortcuts Responsive Design Spacing

Watch on YouTube ↗

‹ Framer Update: Variable Fonts

Framer for Enterprise: Built for teams who think big and move fast. ›