Choosing the right layout tool is about understanding dimensionality. Think of it like organizing a room. A Stack is like a bookshelf. You can line up items horizontally or stack them vertically. It's perfect for one-dimensional arrangements: a navigation bar, a list of articles, or a user profile card. Everything follows a single, predictable line.

A Grid, on the other hand, is like a pegboard wall. You can place items anywhere in a two-dimensional space of rows and columns. This is your tool for complex, asymmetrical layouts that need to align items across both axes. Think of a photo gallery, a dashboard with various widgets, or a magazine-style page. Stacks handle one direction; Grids handle two.

In Framer, Stacks are your go-to for most component-level layouts. They are simple, fast, and predictable. Only reach for a Grid when you need to control both the horizontal and vertical position of elements in relation to each other, creating a true matrix.

The stability of your layout depends on how you define the size of your elements. Framer gives you three primary behaviors: Fixed, Fit Content, and Fill Container. Mastering them is key to avoiding broken layouts.

Sizing conflicts often happen when you nest these behaviors improperly. A classic problem is placing a Fill element inside a Fit Content parent. The parent is trying to shrink to fit its children, but one of its children is trying to expand to fill the parent. This creates a circular dependency, and the layout can't be resolved.

The solution is to provide guardrails using Min and Max constraints. For instance, you can tell a Fill element inside a Fit parent to have a max-width of 100%. This breaks the conflict. The child will try to fill, but only up to the maximum boundary allowed, giving the parent a definite size to calculate.

A popular modern design pattern is the Bento Grid—a layout of different-sized tiles arranged in a grid, resembling a Japanese bento box. It’s a visually engaging way to present a portfolio, feature list, or dashboard.

Building a bento grid in Framer is a prime use case for the Grid tool. After setting up your grid with the desired number of columns and rows, you can make an element span multiple cells. You'll find options for 'Column Span' and 'Row Span' in the properties panel. By setting an item to span, say, 2 columns and 2 rows, you create a larger tile that breaks the monotony of a uniform grid.

Sometimes you need an element to break out of the normal layout flow. A common example is a 'New' badge on a product card or a close icon in the corner of a modal window. For this, you use absolute positioning.

The trick is to place your absolutely positioned element inside a parent container (usually a Stack or Frame) that has its position set to 'Relative'. This makes the parent the positioning context. Now, when you set the child to 'Absolute', its position (e.g., top: 8px, right: 8px) is calculated relative to the corners of its parent, not the entire page.

Finally, build your layouts by nesting Stacks and Grids. Use a Grid for the main page structure—like a header, sidebar, and content area. Then, inside each of those grid cells, use Stacks to organize the content within. A sidebar might be a vertical Stack of navigation links. A content area could be a vertical Stack of article sections. This combination of tools gives you both high-level structure and fine-grained control, allowing you to build anything.

Ready to test your knowledge?