Layout
Sizing
Every screen has a max size, and your site appears inside a browser window. That browser works like the parent: your elements size themselves based on it. And in the end, everything gets calculated in pixels.
That’s important, because every sizing option needs a pixel-based reference to work. Whether it’s a %, fr, or vh, it all comes down to having a size to calculate from.
Does this matter for responsiveness?
Sure it does! Screens come in all sizes. A phone screen might be 320 pixels wide, while a large monitor could be 5K or more.
On mobile, the browser usually takes up the whole screen. But on desktop, users can resize the window however they want. That means you cannot rely on fixed sizes. To keep your layout working across all screens, you need to pick the right sizing option for each case.
Sizing options in Framer
From fixed to fit to fill this is where you learn what each option actually does and when to use it.
Fixed size (Width, Height)
Simple: you set the size in exact units, and it stays that way no matter what. The content inside will try to fit within that space. If it is too big, it will either overflow or get cut off.
Relative size (Width, Height)
This is defined in percentages. The size of the direct parent stack is always the reference, no matter how that parent is sized. A relatively sized element calculates its size based on the parent, regardless of how many sibling elements are next to it.
So in a parent that is 1000px wide, an element with 50% width will be 500px.
Note that relative sizing ignores the parent’s gap settings, but it does take padding into account.
Fill (Width, Height)
This is defined using fr, short for fraction. The size of the direct parent stack is the reference again, but this time the element fills the available space within it. Fill takes into account the parent's padding and also adjusts based on other elements around it.
It is great for filling leftover space (like placing two fit-width buttons next to each other), or for distributing equal-sized items (like cards) inside a parent. You can even mix and match both approaches.
Keep in mind: Fill respects the parent's gap and padding, and also adjusts depending on what other elements are present.
It is my personal favorite because of how flexible it is.
Fit (Width, Height)
This one is simple too: the element only takes up as much space as its content needs. So in this case, it is not the parent that defines the size, but the content itself.
Fit sizing respects the padding and gap.
This type of sizing is ideal for buttons or tag clouds. Just make sure the parent container has Wrap: Yes turned on when you're building a list. Otherwise, the list might overflow its container.
Viewport (Height only)
This sizing listens to the height of the browser window. It scales similarly to percentage-based sizing, but uses vh as the unit, where 100vh = 100% of the viewport height.
Note that view height ignores the parent’s gap and padding settings. That is why it is a good idea to set the parent to vh height, and place a fill stack inside to handle padding and spacing.
It is great for fullscreen sections, but be aware that it behaves a bit unpredictably on mobile. When scrolling starts, browser UI elements (like the address bar) may collapse, changing the viewport height. That is why you might see small jumps at the start of a scroll on mobile.
Fit Image
If the size of the image matters in your layout, use the Fit Image setting. This new option matches the stack to the image’s aspect ratio. Set one dimension (like Width) however you like for example, Fill and the other will automatically adjust based on the image.
It is especially useful when displaying images of different sizes in a CMS list.
Playground of element size types
Now it’s time to experiment and understand how sizing works in practice. Observe how each type behaves in the browser or better yet, play with them directly in the Framer editor.
Follow the suggestions or tweak them your own way if you feel adventurous. You can’t break anything here.
🔩
Relative size (%)
🤰
Fit
🤰
Fit
🤰
Also Fit
🧱
Fixed size (px)
🧱
Fixed size (px)
🌊
Fill (fr)
🤰
Fit
🤰
Fit
🤰
Also Fit
🌊
Fill (fr)
🤰
Fit
🤰
Fit
🤰
Also Fit
Responsive design is not just about sizing
Even with sizing in place, you are not done yet. You also need to consider properties like Direction, Distribute, and Align in the layout settings. These control whether elements are next to each other or stacked, whether they align left or right, start from the top or bottom, and so on.