@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 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 /> 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 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 /> Use it like [top] or [top, bottom] | [number] [number, number] | [20, 20] | | margin | Top and/or bottom margin of the <Row /> 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 (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>