Frontend React Components utilizes Bootstrap’s grid system.  It uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.
For more information have a look at the react-bootstrap documentation: https://react-bootstrap.github.io/layout/grid/

The grid is made up of **12 columns** with a fixed gap width of **30px**

```jsx
import { Container, Row, Col, Card } from 'frontend-react-components';

<Container>
  <Row>
    <Col><Card body>1 of 2 ( 6 cols )</Card></Col>
    <Col><Card body>2 of 2 ( 6 cols )</Card></Col>
  </Row>
  <Row>
    <Col><Card body>1 of 2 ( 4 cols )</Card></Col>
    <Col><Card body>2 of 2 ( 4 cols )</Card></Col>
    <Col><Card body>2 of 3 ( 4 cols )</Card></Col>
  </Row>
</Container>
```

### Responsive example

```jsx
import { Container, Row, Col, Card } from 'frontend-react-components';

/* This component is using the bootstrap helper classes for hiding and showing content based on viewport size */
const Box = ()=> (
  <Card body>
    <div className="d-block d-sm-none">12 columns, only shown on extra small resolutions (xs)</div>
    <div className="d-none d-sm-block d-md-none">12 columns, only shown on small resolutions(sm)</div>
    <div className="d-none d-md-block d-lg-none">6 columns, only shown on medium resolutions(md)</div>
    <div className="d-none d-lg-block">4 columns, only shown on large resolutions(lg)</div>
  </Card>
);

<Container>
  <Row>
    <Col xs={12} md={6} lg={4}><Box /></Col>
    <Col xs={12} md={6} lg={4}><Box /></Col>
    <Col xs={12} md={6} lg={4}><Box /></Col>
  </Row>
</Container>
```