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

Layout based on 12 Grids System.

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

   <Row>
      <Col span={6}>Column</Col>
      <Col span={6}>Column</Col>
   </Row>
   

Basic steps to customize grid.

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

<Row gutter={40}>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>

Offset can set the column to the right side.

<Row gutter={40}>
   <Col span={4} offset={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>

Order property can easily change column order.

<Row gutter={40}>
   <Col span={4} order={4}>4 col-4</Col>
   <Col span={4} order={3}>3 col-4</Col>
   <Col span={4} order={2}>2 col-4</Col>
   <Col span={4} order={1}>1 col-4</Col>
</Row>

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

<Row gutter={40} justify="start" align="top">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>

<Row gutter={40} justify="center" align="bottom">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>

<Row gutter={40} justify="end" align="middle">
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
   <Col span={4}>col-4</Col>
</Row>

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

<Row gutter={40}>
  <Col xs={2} sm={4} md={6} lg={8} xl={10}>xl-10</Col>
  <Col xs={10} sm={8} md={6} lg={4} xl={2}>xl-2</Col>
</Row>

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

<Row gutter={40}>
  <Col xs={{ span: 6, offset: 2 }}>xs-6</Col>
  <Col span={4}>col-4</Col>
</Row>

1. git clone https://github.com/abraztsov/ReactSimpleFlexGrid.git
2. cd ReactSimpleFlexGrid
3. npm start
4. Go to localhost:8080

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!

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

You can see table for update information.