npm package: @piksl/grid
Description: - Establish a set of column `<Col />` in the horizontal space defined by row `<Row />`.
Author: Robin van der Voort
Latest version: 1.5.0

# @piksl/grid

- Establish a set of column `<Col />` in the horizontal space defined by row `<Row />`.

- Your content elements should be placed directly in the `<Col />`, and only `<Col />` should be placed directly in`<Row />`.

- The column grid system is a value of 1-12 to represent its range spans. For example, three columns of equal width can be created by `<Col xl={4} />`.

- If the sum of `<Col />` spans in a row are more than 12, then the overflowing `<Col />` as a whole will start a new line arrangement.

## API

### Container

| Prop               | Description                                         | Type                                                                                  | Default |
| ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
| minHeight          | Minimum height of the `<Container />`               | `string`                                                                              | -       |
| background         | Background of the `<Container />`                   | `string`                                                                              | -       |
| backgroundColor    | Background-color of the `<Container />`             | `string`                                                                              | -       |
| backgroundImage    | Background-image of the `<Container />`             | `string`                                                                              | -       |
| backgroundSize     | Background-size of the `<Container />`              | `cover` `contain` `string`                                                            | -       |
| backgroundPosition | Background-position of the `<Container />`          | `string`                                                                              | -       |
| justify            | Vertical alignment children of the `<Row />` inside | `flex-start` `flex-end` `center` <br /> `space-between` `space-around` `space-evenly` | -       |
| className          | The classname of the `<Container />`                | `string`                                                                              | -       |
| id                 | The id of the `<Container />`                       | `string`                                                                              | -       |
| ref                | The ref that is passed to the `<Container />`       | `any`                                                                                 | -       |
| padding            | Top and/or bottom padding of the `<Container />`<br /> Use it like `[top]` or `[top, bottom]` | `[number]` `[number, number]`               | -       |

### Row

| Prop            | Description                                                                              | Type                                                                                  | Default    |
| --------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------- |
| fluid           | Makes the `<Row />` fluid                                                                | `boolean`                                                                             | `false`    |
| backgroundColor | Background-color of the `<Row />`                                                        | `string`                                                                              | -          |
| justify         | Horizontal alignment of the `<Col />` inside                                             | `flex-start` `flex-end` `center` <br /> `space-between` `space-around` `space-evenly` | -          |
| align           | Vertical alignment                                                                       | `flex-start` `flex-end` `center` `stretch`                                            | -          |
| wrapReverse     | Reverse the order at wrap                                                                | `boolean`                                                                             | `false`    |
| padding         | Top and/or bottom padding of the `<Row />` <br /> Use it like `[top]` or `[top, bottom]` | `[number]` `[number, number]`                                                         | `[20, 20]` |
| margin          | Top and/or bottom margin of the `<Row />` <br /> Use it like `[top]` or `[top, bottom]`  | `[number]` `[number, number]`                                                         | `[0, 0]`   |
| borderRadius    | Border-radius of the `<Row />`                                                           | `string`                                                                              | -          |
| className       | The classname of the `<Row />`                                                           | `string`                                                                              | -          |
| id              | The id of the `<Row />`                                                                  | `string`                                                                              | -          |

### Col

| Prop      | Description                                                             | Type                                               | Default |
| --------- | ----------------------------------------------------------------------- | -------------------------------------------------- | ------- |
| xs        | Span of the `<Col />` when `window.innerWidth <= 576px`                 | `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` `11` `12` | `12`    |
| sm        | Span of the `<Col />` when `window.innerWidth between 577px and 768px`  | `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` `11` `12` | `12`    |
| md        | Span of the `<Col />` when `window.innerWidth between 769px and 992px`  | `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` `11` `12` | `12`    |
| lg        | Span of the `<Col />` when `window.innerWidth between 993px and 1200px` | `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` `11` `12` | `12`    |
| xl        | Span of the `<Col />` when `window.innerWidth > 1200px`                 | `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` `11` `12` | `12`    |
| minWidth  | Minimum width of the `<Col />`                                          | `string`                                           | -       |
| maxWidth  | Maximum width of the `<Col />`                                          | `string`                                           | -       |
| className | The classname of the `<Col />`                                          | `string`                                           | -       |
| id        | The id of the `<Col />`                                                 | `string`                                           | -       |

The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including occasionally part).


### ConfigProvider

Wrap the `<ConfigProvider />` around the components where you would like to use `<Container />`, `<Row />` and `<Col />` with a different styling then the default, without adjusting the properties continually.

#### Usage example

To create a layout like the example image below, the could would look like:

```
<Container justify="flex-end" >
    <Row
        justify="space-between"
        align="flex-start"
    >
        <Col xl={6} />
        <Col xl={3} />
    </Row>
</Container>
```

![@piksl/grid example](grid.jpg)