Grids - Overview

Purpose

Grids are used in Figma to help to organise content in a consistent, structured way. Grids come in different sizes that correspond to the Breakpoints in React.

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, Desktop, Max. width

Depending on the screen size the grids have different number of columns and values for margin and gutters.