Skip to content

Grid

Grids create consistent layouts using rows and columns.

Overview

By using a grid, we can design and build consistent layouts - they function a little differently across the Figma and Development environments.

In Figma, grids are built in as a layout grid style you can apply to your frames, this helps designers keep things aligned. In figma we use different grids for different screen sizes.

In React and React Native we have “Rows” and “Columns”. When creating layouts we match the number of columns each area needs to the grid in Figma. The grid is responsive so all we need to do is specify the correct amount of columns for each screen size.

Usage

Grids are built using a combination of the Row and Col components.

By default,Row components include a max width and gutters for use as the main container of a page. This can be negated with the isNested prop.

Responsive Example

When we want the grid to be responsive we can use the small, medium, and large properties on our Col components to span different widths for different breakpoints.

Properties

Row

NameValuesDefault

isNestedRemoves max-width and gutters

Boolean

false

...

JSX.IntrinsicElements["div"]

Col

Set the width (in columns out of 12) that this Col should span at each breakpoint.

NameValuesDefault

spannumber of columns to span by default

Number

12

smallnumber of columns to span from 'small' and up

Number

mediumnumber of columns to span from 'medium' and up

Number

largenumber of columns to span from 'large' and up

Number

...

JSX.IntrinsicElements["div"]

Tokens