Joseph
7:07
Build layouts that resize correctly in Framer
Framer sizing modes control how a layer measures its width and height. Use Fixed for a set pixel size, Relative for a percentage of the parent, Fill for available space in a Stack or grid, Fit Content for the size of child layers, and Viewport for browser-height layouts. Combine different modes across dimensions to build responsive layouts.
Lesson details
Choose a sizing mode by deciding what should control each dimension. Fixed keeps a pixel value regardless of its parent, children, or siblings, which works well for icons, avatars, and logos. Relative uses a percentage of the parent and can exceed 100%, making it useful for flexible background elements that extend beyond their container.
Fill takes a share of the space left by siblings inside a Stack or grid. Fractional units such as 1fr and 2fr control those shares and recalculate as available space changes. Fit Content works in the opposite direction by wrapping a parent around its relative-positioned children, including any padding.
Width and height can use different modes. A section often fills its parent horizontally while fitting its content vertically. Viewport sizing uses vh units for browser-height layouts such as a 100vh hero. Avoid pairing a Fit Content parent with a Fill child on the same dimension, because neither layer provides a resolved size. Preview the result across viewport widths before publishing.
Frequently asked questions
What are the five sizing modes in Framer?
The five sizing modes are Fixed, Relative, Fill, Fit Content, and Viewport. Fixed uses a set pixel value. Relative measures against the parent. Fill shares the space left by siblings. Fit Content wraps a parent around its relative-positioned children. Viewport measures height against the browser window.
What is the difference between Relative and Fill sizing?
Relative sizing uses a percentage of the parent and ignores sibling layers. Fill sizing considers both the parent and the space already used by siblings, so it requires a Stack or grid. Use Relative for flexible layers outside the layout flow and Fill when siblings should divide the available space.
When should I use Fit Content in Framer?
Use Fit Content when a parent should grow or shrink with its relative-positioned children. Buttons are a common example: the parent Stack fits the text while padding creates space around it. Absolutely positioned children do not contribute to the fitted size because they sit outside the normal layout flow.
Can width and height use different sizing modes?
Yes. Width and height can use separate sizing modes. A common responsive pattern sets a section to Fill its parent horizontally and Fit Content vertically. The section then follows the available page width while its height grows with the content, which avoids clipping when copy wraps or changes.
Why does Framer change a layer to Fixed sizing?
Framer can switch a conflicting dimension to Fixed when the layout has no size it can resolve. This often happens when a parent uses Fit Content while its child uses Fill on the same dimension. Give either the parent or child an explicit source of size, then choose the flexible mode for the other layer.
Continue watching
Load more