Combine Layout Grids and Constraints

Constraints allow you to define how objects react when you resize their parent frame. Constraints can control both an object's relative position and size.

Layout Grids are visual aids that help you align objects within frames. When you use a Layout Grid within a frame, Figma aligns objects in that frame to the grid.

You can combine Layout Grids with Constraints to create powerful and flexible layouts. This gives you more granular control over how objects respond as you resize them.

Layout Grids can have Fixed dimensions or Stretch as you resize the frame. The type of Layout Grid will determine whether Figma prioritizes the grid or any Constraints.

In our example below, we have applied center Constraints to the plus icon in our cards. We can see how Figma determines that object's position, depending on the type of Layout Grid we use.

Stretch Layout Grids

If your Grids are set to Stretch, Figma will base an object’s Constraints on the grid's nearest Column or Row.

Stretch Layout Grids adapt to the size of the frame. This allows your designs to respond when you resize the frame. Figma will set the width and height of the grid so that it corresponds to the frame size.

When you use Stretch Layout Grids, Figma into account the object's Constraints, relative to the Layout Grid.

In our example below, the cards in our design have Stretch Layout Grids. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

We can see that Figma has stretched the Layout Grid to match the card's new dimensions. We can also see that the plus icon is still in the center of the right grid column.

Fixed Layout Grids

Fixed Layout Grids let you choose how many columns and rows are in your grid. You can then define both the width of the columns and the height of the rows.

You can then fix the position of a fixed Layout Grid in the parent frame:

• Row: Fix the grid to the top or center of the frame.
• Column: Fix the grid to the left or the center of the frame.

When you use Fixed Layout Grids, Figma will honor Constraints in relation to the frame and not the grid.

In our example below, the cards in our design use a Fixed Layout Grid. Our left screen uses the frame preset for the iPhone 11 Pro, and the right uses the iPad Pro 11".

Our plus icon uses center Constraints. We can see that Figma has set the object's position in relation to the frame and not the Layout Grid.