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

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.

00:00 Intro
00:05 Fill and fit content sizing modes
00:15 How fill sizing works in stacks
00:22 Using fractional units (FR)
00:41 FR math examples
01:01 Mixing fill and fixed sizes
01:08 Benefits of fill sizing for fluid layouts
01:11 Introduction to fit content
01:26 How fit content works
01:52 Fit content with padding
02:13 Fit content shortcuts and defaults
02:34 Avoiding conflicts between fill and fit
02:55 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