Build layouts that resize correctly in Framer

Learn how sizing modes work in Framer and how to choose between Fixed, Relative, Fill, Fit Content, and Viewport when building responsive websites. In this lesson, you’ll learn what each Framer sizing mode measures against and how that affects your layout as the viewport changes. We’ll cover how Relative sizing responds to a parent, how Fill uses fr units to divide available space between siblings, how Fit Content sizes a layer around its children, and how Viewport sizing uses the browser window itself. You’ll also see how to combine different sizing modes for width and height, build common responsive layout patterns, and avoid conflicts between Fill and Fit Content. By the end, you’ll be able to look at a layer, decide what should control its size, and choose the right sizing mode for the layout you’re building. 00:00 Intro 00:22 Fixed sizing 01:00 Relative sizing 01:50 Fill sizing and fr units 03:41 Fit Content sizing 04:34 Mixing height and width 05:10 Viewport sizing 05:49 Resolving sizing conflicts 06:23 Wrap-up Sign up: https://framer.link/yt Follow: https://framer.link/yt-x Learn: https://framer.link/yt-academy