react-reflex-grid
React.js wrapper for reflex-grid library.
Components
Container
Reflex grid has a responsive .container
class available which uses a combination of margins and padding to maintain layout between elements both inside and outside of the grid.
For more information about it, please see container article.
The following properties may be set:
full
- make the full-width containing element. Example:<Container full>...</Container>
.className
- additional CSS classes for component.hidden
- allow to hide whole row at the specific breakpoints. Allowed breakpoints: XXS, XS, SM, MD, LG, XLG. Example:<Container hidden="xs,sm">...</Container>"
.
Row
Container for columns. The following properties may be set:
bleed
- remove the internal padding on the entire grid.className
- additional CSS classes for component.hidden
- allow to hide whole row at the specific breakpoints. Allowed breakpoints: XXS, XS, SM, MD, LG, XLG. Example:<Row hidden="xs,sm">...</Col>"
.align
- when this will be applied toRow
, then columns will be collapsed to content and aligned to vertical position, as it is set by value ofalign
. It can be set in the following way:<Row align=["start"|"center"|"end"]>...</Row>
direction-row-reverse
,direction-column
,direction-column-reversed
- set the direction of columns.justify-end
,justify-center
,justify-space-between
,justify-space-around
- set the justification of columns.- Grid wrapping:
wrap
- Wrap columns if there is no space left (default).no-wrap
- Put all columns in single row, even if there is no space left.wrap-reverse
- Gives you a grid that wraps in reverse if there is no space left.
Col
Column element. The following properties may be set:
size
- the size of column. Should be set as a number:<Col size={6}>...</Col>
.col
(deprecated) - the size of column. Should be set as a string, like<Col col="6">
orCol col="md-6">
.auto
- set column size to auto. Example:<Col auto>...</Col>
.xs
,sm
,md
,lg
,xlg
- set the breakpoint for column. Example:<Col size={6} md>...</Col>
. For more information about breakpoints, please see breakpoints.bleed
- remove the internal padding on the specific column. Example:<Col bleed>....</Col>
. May take"x"
or"y"
value, which removes only vertical or horizontal paddings. Example:<Col bleed="x">....</Col>
,<Col bleed="y">....</Col>
.className
- additional CSS classes for component.hidden
- allow to hide column at the specific breakpoints. Allowed breakpoints: XXS, XS, SM, MD, LG, XLG. Example:<Col hidden="xs,sm">...</Col>"
.order
- Set the order, in which specified column will be shown in grid. Takes number as value:<Col order={1}>...</Col>
responsive-order
- Set the order in responsive mode. Valid values:<breakpoint>-<orderNr>[,<breakpoint>-<orderNr>]
, wherebreakpoint
is one of:xs
,sm
,md
,lg
,xlg
andorderNr
may be set from1
to12
.align-content-start
,align-content-end
,align-content-center
,align-content-space-between
,align-content-space-around
- Cross axis positioning.
Usage
Simple usage
<Row> <Col =>COL A</Col> <Col =>COL B</Col></Row>
or
<Row> <Col =>COL X</Col> <Col =>COL Y</Col> <Col =>COL Z</Col> <Col =>COL R</Col></Row>
Apply style classes
<Row ="bg"> <Col = ="fg">COL A</Col> <Col = ="fg">COL B</Col></Row>
Auto column size
<Row> <Col =>COL A</Col> <Col >COL B</Col> <Col >Auto Col Size</Col></Row>
Breakpoints
<Row> <Col = >COL A</Col> <Col = >COL B</Col> <Col >Auto Col Size</Col></Row>
Bleed
Grid
<Row > <Col =>COL A</Col> <Col =>COL B</Col></Row>
Column
<Row> <Col = >COL A</Col> <Col =>COL B</Col></Row>
Vertical (Y) and horizontal (X) paddings removal
<Row> <Col = ="x">COL A</Col> <Col = ="y">COL B</Col></Row>
Container
Simple
<Container> <Row> <Col =>Col Size 12</Col> </Row></Container>
Container full
<Container > <Row> <Col =>Col Size 12</Col> </Row></Container>
Hidden
Col
<Row> <Col > <h3>Auto Column</h3> </Col> <Col = ='xxs,xs,sm'> <h3>Col Size 6 hidden at XS SM visible at XXS MD LG XLG</h3> </Col></Row>
Row
<Row ='xxs,xs,sm'> <Col => <h3>Col Size 6</h3> </Col> <Col => <h3>Col Size 6</h3> </Col></Row>
Container
<Container ='xxs,xs,sm'> <Row> <Col => <h3>Col Size 6</h3> </Col> <Col => <h3>Col Size 6</h3> </Col> </Row></Container>
Cross-Axis Align
<Row ="start"> <Col => <h3>Col Size 4</h3> </Col> <Col => <h3>Col Size 4</h3> </Col> <Col => <h3>Col Size 4</h3> </Col></Row>
Ordering
<Row> <Col = => <h3>B</h3> </Col> <Col = => <h3>A</h3> </Col> <Col = => <h3>D</h3> </Col> <Col = => <h3>C</h3> </Col></Row>
Direction
<Row > <Col => <h3>A</h3> </Col> <Col => <h3>B</h3> </Col> <Col => <h3>C</h3> </Col> <Col => <h3>D</h3> </Col></Row>
Justification
Take a look on size attribute!
<Row > <Col => First appear years night there the in them rule </Col> <Col => Be winged good for also saying first Shall fourth Greater cattle </Col> <Col => First appear years night there the in them rule </Col></Row>
Responsive order
<Row> <Col = => First col </Col> <Col = => Second col </Col> <Col = => Last col </Col></Row>
Cross axis positioning
<Row > <Col => First col </Col> <Col => Second col </Col></Row>
Grid wrapping
<Row > <Col => First </Col> <Col => Second </Col> <Col => Last </Col></Row>