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 to Row, then columns will be collapsed to content and aligned to vertical position, as it is set by value of align. 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"> or Col 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>], where breakpoint is one of: xs, sm, md, lg, xlg and orderNr may be set from 1 to 12.
• 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 size={6}>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>

or

<Row>
    <Col size={3}>COL X</Col>
    <Col size={3}>COL Y</Col>
    <Col size={3}>COL Z</Col>
    <Col size={3}>COL R</Col>
</Row>

Apply style classes

<Row className="bg">
    <Col size={6} className="fg">COL A</Col>
    <Col size={6} className="fg">COL B</Col>
</Row>

Auto column size

<Row>
    <Col size={3}>COL A</Col>
    <Col size {3}>COL B</Col>
    <Col auto>Auto Col Size</Col>
</Row>

Breakpoints

<Row>
    <Col size={3} md>COL A</Col>
    <Col size={3} md>COL B</Col>
    <Col auto>Auto Col Size</Col>
</Row>

Bleed

Grid

<Row bleed>
    <Col size={6}>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>

Column

<Row>
    <Col size={6} bleed>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>

Vertical (Y) and horizontal (X) paddings removal

<Row>
    <Col size={6} bleed="x">COL A</Col>
    <Col size={6} bleed="y">COL B</Col>
</Row>

Container

Simple

<Container>
    <Row>
        <Col size={12}>Col Size 12</Col>
    </Row>
</Container>

Container full

<Container full>
    <Row>
        <Col size={12}>Col Size 12</Col>
    </Row>
</Container>

Hidden

Col

<Row>
    <Col auto>
        <h3>Auto Column</h3>
    </Col>
    <Col size={6} hidden='xxs,xs,sm'>
        <h3>Col Size 6, hidden at XS, SM, visible at XXS, MD, LG, XLG.</h3>
    </Col>
</Row>

Row

<Row hidden='xxs,xs,sm'>
    <Col size={6}>
        <h3>Col Size 6.</h3>
    </Col>
    <Col size={6}>
        <h3>Col Size 6.</h3>
    </Col>
</Row>

Container

<Container hidden='xxs,xs,sm'>
    <Row>
        <Col size={6}>
            <h3>Col Size 6.</h3>
        </Col>
        <Col size={6}>
            <h3>Col Size 6.</h3>
        </Col>
    </Row>
</Container>

Cross-Axis Align

<Row align="start">
    <Col size={4}>
        <h3>Col Size 4.</h3>
    </Col>
    <Col size={4}>
        <h3>Col Size 4.</h3>
    </Col>
    <Col size={4}>
        <h3>Col Size 4.</h3>
    </Col>
</Row>

Ordering

<Row>
    <Col size={3} order={2}>
        <h3>B</h3>
    </Col>
    <Col size={3} order={1}>
        <h3>A</h3>
    </Col>
    <Col size={3} order={4}>
        <h3>D</h3>
    </Col>
    <Col size={3} order={3}>
        <h3>C</h3>
    </Col>
</Row>

Direction

<Row direction-column-reversed>
    <Col size={3}>
        <h3>A</h3>
    </Col>
    <Col size={3}>
        <h3>B</h3>
    </Col>
    <Col size={3}>
        <h3>C</h3>
    </Col>
    <Col size={3}>
        <h3>D</h3>
    </Col>
</Row>

Justification

Take a look on size attribute!

<Row justify-space-between>
    <Col size={3}>
        First appear years night there the in them rule.
    </Col>
    <Col size={3}>
        Be can't winged good for also saying first. Shall, fourth Greater cattle.
    </Col>
    <Col size={3}>
        First appear years night there the in them rule.
    </Col>
</Row>

Responsive order

<Row>
    <Col size={4} responsive-order={'md-2,sm-3'}>
        First col
    </Col>
    <Col size={4} responsive-order={'md-3,sm-2'}>
        Second col
    </Col>
    <Col size={4} responsive-order={'md-1,sm-1'}>
        Last col
    </Col>
</Row>

Cross axis positioning

<Row align-content-center>
    <Col size={6}>
        First col
    </Col>
    <Col size={6}>
        Second col
    </Col>
</Row>

Grid wrapping

<Row no-wrap>
    <Col size={4}>
        First col (4)
    </Col>
    <Col size={4}>
        Second col (4)
    </Col>
    <Col size={10}>
        Last col (10)
    </Col>
</Row>