Grids create consistent layouts using rows and columns.
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.
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.
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.
isNestedRemoves max-width and gutters
Set the width (in columns out of 12) that this Col should span at each breakpoint.
spannumber of columns to span by default
smallnumber of columns to span from 'small' and up
mediumnumber of columns to span from 'medium' and up
largenumber of columns to span from 'large' and up