Grids - Overview
Purpose
Grids are used in Figma to help to organise content in a consistent, structured way.
For further information on working with Grids and Breakpoints, check out our Layout Guide.
Anatomy
Grids can be broken down into the following elements -
1. Margins
Margins describe the spaces on the outside of the first and last column. Content will typically sit inside those margins. Exceptions are full bleed images and certain components (as described in their respective documentation).
2. Columns
The content area is split evenly into columns. The number of columns depends on the viewport size. The width of the columns expand or shrink on resize.
3. Gutters
Gutters are the spaces between columns. Gutters have different widths depending on the viewport size.
Variants & States
Sizes: Mobile, Tablet (Portrait), Tablet (Landscape), Desktop, Desktop (>1248px)
Depending on the screen size the grids have different number of columns and values for margin and gutters. The below table also shows which component variants are to be used for which viewport size.
| Name | Viewport width | Margin/Gutter | Columns | Figma variant |
|---|---|---|---|---|
| Mobile (XS-SM) | 0-639px | 16px | 4 | Mobile |
| Tablet Portrait (MD) | 640-799px | 16px | 8 | Mobile * |
| Tablet Landscape (LG) | 800-959px | 24px | 8 | Desktop * |
| Desktop (XL) | 960-1247px | 24px | 12 | Desktop |
| Desktop Large (≥ 1248) (XXL) | ≥ 1248 | 24px | 12 | Desktop |