Sizing to Fill and Fit Content in Framer
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”.
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.
