Documentation
Components
Grid

Grid

The Grid component renders a design system grid in your React Native application. It's worth noting that you should only utilize this component once and at the highest level of your component tree. This will ensure that the grid is applied consistently throughout your application.

Grid

<>
  <Rows space={2}>
    <Row flex="content">
      <Placeholder label="header" height={60} />
    </Row>
    <Row>
      <Placeholder label="body" flex="fluid" />
    </Row>
    <Row flex="content">
      <Placeholder label="footer" height={60} />
    </Row>
  </Rows>
  <Grid columns={8} margin={4} gutter={4} color="#34BDFF" opacity={0.2} />
</>

Props

gutter

Default value
2
Type
ResponsiveProp<number>

Set the space between columns.

margin

Default value
2
Type
ResponsiveProp<number>

Specifies the amount of space on both the left and right sides.

columns

Default value
8
Type
ResponsiveProp<number>

Sets the number of columns.

opacity

Default value
0.2
Type
ResponsiveProp<number>

Adjusts the transparency level for each column.

color

Default value
red
Type
ResponsiveProp<string>

Sets the color of each column.

FloatBoxHidden