ReactSimpleFlexGrid ================= [](https://badge.fury.io/js/react-simple-flex-grid)
npm install react-simple-flex-gridReactSimpleFlexGrid
=================

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
Row
2. Import , Col and grid styles
``
import { Row, Col } from 'react-simple-flex-grid';
import "react-simple-flex-grid/lib/main.css";
`
3. Enjoy
`
Customize
-----
Basic steps to customize grid.
You can use the gutter (px) property of Row as grid spacing.
``
Offset can set the column to the right side.
``
Order property can easily change column order.
``
Flexbox params start, center, end, space-between and space-around can be passed to Row and sort columns inside.
``
---
``
---
``
Based on Bootstrap media queries here five dimensions: xs, sm, md, lg, xl.
``
Span and offset property can be embedded into xs, sm, md, lg, xl such as xl = {{span: 10}}.
``
| Property | Description | Type | Default |
|----------|-----------------------------------------------------------------------------------------------------|--------|---------|
| gutter | grid spacing | number | 0 |
| align | the vertical alignment of the layout of flex: top middle bottom stretch | string | start |start
| justify | horizontal arrangement of the layout of flex: end center space-around space-between | string | start |
| 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.gitcd ReactSimpleFlexGrid
2. npm start
3. localhost:8080`
4. Go to
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.
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 | | |