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 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
| Name | Values | Default |
|---|---|---|
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.
| Name | Values | Default |
|---|---|---|
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"] |
ContentGrid
The ContentGrid component uses CSS grid to layout content based on its size rather than media queries.
The grid will fit as many items as it can in line without going below the size provided, and any orphaned items will match the size of the rest. The spacing between items is the same as a Row/Col setup.
Even wrapping
Sometimes you may want to ensure that content wraps in even groups to prevent one item appearing on its own row. This can be achieved with nesting.
| Name | Values | Default |
|---|---|---|
sizethe minimum size of grid items | string | |
... | JSX.IntrinsicElements["div"] |