Usage

The responsive grid will help layout app elements in a way that follows the grid as represented by the Design Team

---

xs=2 sm=4 md=2 lg=6 xl=8

xs=2 sm=2 md=4 lg=6 xl=4

xs=1 sm=3 md=4 lg=4 xl=6

xs=3 sm=3 md=2 lg=8 xl=6

<Container>
  <Row>
    <Col debug xs={2} sm={4} md={2} lg={6} xl={8}>
      xs={2} sm={4} md={2} lg={6} xl={8}
    </Col>
    <Col debug xs={2} sm={2} md={4} lg={6} xl={4}>
      xs={2} sm={2} md={4} lg={6} xl={4}
    </Col>
  </Row>
  <Row>
    <Col debug xs={1} sm={3} md={4} lg={4} xl={6}>
      xs={1} sm={3} md={4} lg={4} xl={6}
    </Col>
    <Col debug xs={3} sm={3} md={2} lg={8} xl={6}>
      xs={3} sm={3} md={2} lg={8} xl={6}
    </Col>
  </Row>
</Container>

Offset

The offset prop can be passed in as an object with values as columns for each screen size

Offset

<Container debug>
  <Row debug>
    <Col xs={2} sm={2} lg={3} offset={{ xs: 2, sm: 4, lg: 9 }} debug></Col>
  </Row>
</Container>