react-simple-flex-grid

ReactSimpleFlexGrid
=================

A way to quickly add a Flexbox Grid Layout to your app 🚀

Layout based on 12 Grids System.

!demo

Basic Usage
-----

1. Install via npm and yarn

``
npm i -S react-simple-flex-grid

// or

yarn add react-simple-flex-grid
`
2. Import Row, Col and grid styles

`
import { Row, Col } from 'react-simple-flex-grid';
import "react-simple-flex-grid/lib/main.css";
`
3. Enjoy
`

Column
Column

`

!Imgur

Customize
-----

Basic steps to customize grid.

$3

You can use the gutter (px) property of Row as grid spacing.

`

col-4
col-4
col-4

`

!Imgur

$3

Offset can set the column to the right side.

`

col-4
col-4

`

!Imgur

$3

Order property can easily change column order.

`

4 col-4
3 col-4
2 col-4
1 col-4

`

!Imgur

$3

Flexbox params start, center, end, space-between and space-around can be passed to Row and sort columns inside.

`

col-4
col-4
col-4

`

!Imgur

---

`

col-4
col-4
col-4

`

!Imgur


---

`

col-4
col-4
col-4

`

!Imgur

$3

Based on Bootstrap media queries here five dimensions: xs, sm, md, lg, xl.

`

xl-10
xl-2

`

!Imgur

$3

Span and offset property can be embedded into xs, sm, md, lg, xl such as xl = {{span: 10}}.

`

xs-6
col-4

`

!Imgur

API

$3

| Property | Description | Type | Default |
|----------|-----------------------------------------------------------------------------------------------------|--------|---------|
| gutter | grid spacing | number | 0 |
| align | the vertical alignment of the layout of flex: top middle bottom stretch | string | start |
| justify | horizontal arrangement of the layout of flex: start end center space-around space-between | string | start |

$3

| Property | Description | Type | Default |
|----------|----------------------------------------------------------------------------------------|---------------|---------|
| span | the number of cells,0 corresponds to display: none | number | none |
| offset | the number of cells to the left of the grid spacing, no cell in grid spacing | number | 0 |
| order | col number in the row | number | none |
| xs | <768px and also default setting, could be a span value or a object contain above props | number/object | - |
| sm | ≥768px, could be a span value or a object contain above props | number/object | - |
| md | ≥992px, could be a span value or a object contain above props | number/object | - |
| lg | ≥1200px, could be a span value or a object contain above props | number/object | - |
| xl | ≥1600px, could be a span value or a object contain above props | number/object | - |

How to test example locally ?
---
1. git clone https://github.com/abraztsov/ReactSimpleFlexGrid.git
2. cd ReactSimpleFlexGrid
3. npm start
4. Go to localhost:8080`

Feature Requests / Find Bug ?
---

Have an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!

FAQ
-----

This component based on ant design grid. Huge thanks them for a such an awesome work.

$3

You can see table for update information.

| No. | Version | Breakdown | Ket. |
| :------------: | :------------: | ------------ | ------------ |
| 1. | 1.0.1 | | First Release |
| 2. | 1.0.2 | - Added autoprefixer | |
| | | - Fixed Safari bug| |
| 3. | 1.0.3 | Removed unnecessary package | |
| 4. | 1.1.0 | Added order parameter | | |
| 5. | 1.3.0 | Added stretch option to align property | | |