@piksl/grid

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