@piksl/grid NPM

@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>

@piksl/grid example