react-reflex-grid

React.js wrapper for reflex-grid library.

!Release

Components

$3

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: ....
- 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: ".

$3

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: .
- 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: ...
- 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.

$3

Column element. The following properties may be set:
- size - the size of column. Should be set as a number: ....
- col (deprecated) - the size of column. Should be set as a string, like or Col col="md-6">.
- auto - set column size to auto. Example: ....
- xs, sm, md, lg, xlg - set the breakpoint for column. Example: ....
For more information about breakpoints, please see breakpoints.
- bleed - remove the internal padding on the specific column. Example: ..... May take "x" or "y" value, which removes only vertical or horizontal paddings. Example: ...., .....
- className - additional CSS classes for component.
- hidden - allow to hide column at the specific breakpoints. Allowed breakpoints: XXS, XS, SM, MD, LG, XLG. Example: ...".
- order - Set the order, in which specified column will be shown in grid. Takes number as value: ...
- responsive-order - Set the order in responsive mode. Valid values: -[,-], 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

$3

``jsx harmony

COL A
COL B

`
or
`jsx harmony

COL X
COL Y
COL Z
COL R

`

$3

`jsx harmony

COL A
COL B

`

$3

`jsx harmony

COL A
COL B
Auto Col Size

`

$3

`jsx harmony

COL A
COL B
Auto Col Size

`

$3

#### Grid
`jsx harmony

COL A
COL B

`

#### Column
`jsx harmony

COL A
COL B

`
##### Vertical (Y) and horizontal (X) paddings removal
`jsx harmony

COL A
COL B

`

$3

#### Simple

`jsx harmony


Col Size 12


`

#### Container full

`jsx harmony


Col Size 12


`

$3

#### Col

`jsx harmony




Auto Column

Col Size 6, hidden at XS, SM, visible at XXS, MD, LG, XLG.

`

#### Row

`jsx harmony


Col Size 6.

Col Size 6.

`

#### Container

`jsx harmony


Col Size 6.

Col Size 6.

`

$3

`jsx harmony




Col Size 4.

Col Size 4.

Col Size 4.

`

$3

`jsx harmony




B

A

D

C

`

$3

`jsx harmony




A

B

C

D

`

$3

Take a look on size attribute!

`jsx harmony


First appear years night there the in them rule.


Be can't winged good for also saying first. Shall, fourth Greater cattle.


First appear years night there the in them rule.


`

$3

`jsx harmony


First col


Second col


Last col


`

$3

`jsx harmony


First col


Second col


`

$3

`jsx harmony


First col (4)


Second col (4)


Last col (10)


``