Figma's Auto Layout Grid

Why it exists

Design layouts need to adapt as content changes or screen sizes vary. While simple stacks can handle lists or rows of buttons, they fall short for more complex UIs. The Auto Layout Grid was created to manage layouts that require alignment in two dimensions—both rows and columns—simultaneously, making intricate designs like dashboards and galleries responsive without constant manual adjustment.

The mental model

Think of an Auto Layout Grid as a structured spreadsheet, not a flowing paragraph of text. Items you place inside are assigned to specific cells within a grid of rows and columns. This is different from a simple horizontal or vertical layout where items just stack one after another and may wrap onto a new line. The grid imposes a two-dimensional order.

How it works

To use it, you select one or more layers and apply Auto Layout (Shift + A). In the properties panel, you then choose "Grid" as the flow option. Figma arranges the child objects into a grid. The key difference from other flows is that objects do not wrap; they are placed into the grid's structure. The power of this feature is that individual items within the grid can be configured to span multiple columns or rows, allowing for asymmetrical and complex arrangements that remain responsive as the parent frame is resized.

When to use it

Grid is the ideal choice for creating structured, two-dimensional layouts. Use it for image galleries, "bento box" style feature showcases, and complex dashboards. Any time you need items to align in a grid that adapts to different frame sizes, this is the right tool. It provides the control needed for sophisticated, responsive UIs.

When not to use it

Avoid using Grid for simple, one-dimensional arrangements. For a list of items like a newsfeed or a to-do list, a vertical Auto Layout is more appropriate. For a single row of icons or buttons, a horizontal Auto Layout is simpler and more direct. Using Grid for these cases adds unnecessary complexity.

One canonical example

A perfect use case is building a "bento box" on a marketing page to showcase product features. You can create a grid where a main feature takes up a 2x2 cell, while smaller secondary features occupy 1x1 cells around it. Because items can span columns and rows, the entire composition adapts gracefully when you resize the main frame for different screen sizes, maintaining the intended visual hierarchy.