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.
- Use the grid to organise page content across 12 equal vertical columns.
- Don't use the grid to divide and define layout within individual components in a page design. For example, don't use the the grid to divide a card into 12 equal sections. The Element grid is designed to be used to define a page layout.
Live example
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.
For responsive column behaviour, it is possible to set different column widths per breakpoint by setting any valid combination of the small, medium, and large props on a Col element.
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
xxx
xxx
Properties
Grid
|
Name |
Values |
Default |
|---|---|---|
|
span |
Number |
12 |
|
small |
Number |
|
|
medium |
Number |
|
|
large |
Number |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Row
|
Name |
Values |
Default |
|---|---|---|
|
isNested |
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 |
|---|---|---|
|
span |
Number |
12 |
|
small |
Number |
|
|
medium |
Number |
|
|
large |
Number |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Related components