Grid

The Grid components consists of 3 different components: <Grid>, <Row>, <Col>. By default, it has a max content width of 1320px and gutters of 24px.

Example

<Grid>
  <Row align="center">
    <Col size={3}>Size: 3</Col>
    <Col size={7}>Size: 7</Col>
  </Row>
  <Row align="flex-start">
    <Col size={2}>Size: 2</Col>
    <Col size={5}>Size: 5</Col>
  </Row>
</Grid>

Props - Grid

Row

Groups a number of columns and can align them.

A row groups a number of columns and can align them

Props - Row

undefined

undefined

A col component has a size to define how many columns it spans over.

The size prop can be used in two different ways:

• Passing a number will set the column size for the fromL breakpoint while it defaults to full width for smaller viewports.
• Passing an object with sizes for the available breakpoints:
  • default: refers to viewports from 0 - 480px
  • theme.breakpoints.fromM: refers to viewports from 480 - 1024px
  • theme.breakpoints.fromL: refers to viewports over 1024px

DebugGrid

We also provide a debugging component that displays a fixed grid overlay. You can use it by importing it in development:

Example

<DebugGrid />

Props - DebugGrid