On this page
Quick steps
Add auto layout
Select a frame or a set of layers and press Shift+A, or use the Auto layout button in the right sidebar.
Switch the flow to Grid
In the auto layout settings, choose Grid instead of Vertical or Horizontal.
Size the rows and columns
Set each track to Fixed, Fill (fr units) or Hug, and add a min or max if needed. Rows default to auto.
Make items span cells
Set a child to Fill container and drag it to the cell edges, or type a Column span or Row span.
Track sizing: Fixed, Fill and Hug
Each row and column in a grid is a track, and each track has its own sizing. Fixed keeps a typed size. Fill shares the free space using fr units, the same idea as CSS grid. Hug sizes the track to its content. Any track can also take a min and max value, which keeps a Fill column from getting too narrow.
How to span a child across cells
A child spans more than one cell when it's set to Fill container. Drag its edges out to cover the cells you want, or set Column span and Row span numbers in the sidebar. This is how you build a dashboard where one chart covers two columns and the small stat cards sit one per cell.
Figma grid not working?
- Items don't flow onto a new row as the frame shrinks. Grid items don't wrap. If you want a row of cards that reflows, use the Horizontal flow with wrap instead; see auto layout wrap not working.
- A child won't span. Set it to Fill container first, then use Column span or Row span.
- You wanted column guides, not a layout. That's a layout guide: select the frame and choose Add layout guide. See Figma layout guides.
Is there a grid layout shortcut?
There's no separate key for the Grid flow. Press Shift+A to add auto layout, then switch the flow. If you mean showing and hiding layout guides, Figma's own help pages disagree: one says Shift+G, the other says ⌃G on Mac and Ctrl+Shift+4 on Windows. Check the shortcuts panel (Ctrl+Shift+?) for your version, or read the grid shortcut guide.
| Action | Mac | Windows |
|---|---|---|
| Add auto layout (then pick Grid) | Mac⇧A | WindowsShiftA |
| Show / hide layout guides (pages disagree) | Mac⇧Gor⌃G | WindowsShiftGorCtrlShift4 |
| Keyboard shortcuts panel | Mac⌃⇧? | WindowsCtrlShift? |
For the basics of gap, padding and alignment, see how to use auto layout in Figma.
Ranked listThe best Figma wireframe plugins in 2026Frequently asked questions
How do I create a grid in Figma?
Select a frame or layers, press Shift+A to add auto layout, and choose the Grid flow. Then size the rows and columns and set any spans.
Is the Figma Grid flow the same as a layout grid?
No. Layout grids were renamed layout guides in May 2025 and are visual overlays for alignment. The Grid flow is part of auto layout and moves the layers into cells.
How do I make an item span two columns in a Figma grid?
Set the child to Fill container, then drag its edges across the cells or set Column span to 2.
Do Figma grid items wrap?
No. Grid items stay in their cells. Use Horizontal auto layout with wrap if you need items to reflow onto new lines.
More in Auto layout & frames
- How to Use Absolute Position and Z-Index in Figma Auto LayoutAbsolute position in Figma is Ignore auto layout. How to free one child to overlap others, change z-index with canvas stacking, and why you can't move a layer.
- Why Is Figma Auto Layout Wrap Not Working?Figma auto layout wrap not working? Wrap only exists in Horizontal flow, and a Fill container child never wraps without a min width. Here's how to fix both.
- Fill Container vs Hug Contents in Figma: Why Is One Missing?Fill container only shows on children of an auto layout frame, and Hug only on auto layout frames. How Fixed, Hug and Fill work, plus min and max width fixes.
- How to Use Auto Layout in FigmaHow to use Figma auto layout: add it with Shift+A, pick a flow, then set gap, padding, alignment and resizing. Plus fixes for extra space and missing options.
- Frame vs Group in Figma: Which Should You Use?Figma frame vs group: groups take the size of their children, frames have their own size, clip content and auto layout. Shortcuts to group, frame and unframe.
- Why Are Constraints Not Showing in Figma?Constraints in Figma not showing? In UI3 they sit in the Position section, and only for layers inside a plain frame. Here's why they vanish and how to fix it.
- How to Make a Skeleton Loader in FigmaHow to design a skeleton loader in Figma: grey blocks with auto layout, a component with variants, a Smart Animate shimmer, and a plugin that converts frames.
- Figma Frame Sizes: Which Preset to Pick and How to Change ItPick a Figma frame size from the Phone, Tablet, Desktop or Paper presets, change an existing frame's size, and why you design at viewport size, not resolution.
- What Is the Figma Auto Layout Shortcut?The Figma auto layout shortcut is Shift+A on Mac and Windows. Here are the keys to remove and suggest auto layout, plus what to do for Ignore auto layout.