ReactSimpleFlexGrid

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

Layout based on 12 Grids System.

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

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

Customize

Basic steps to customize grid.

Gutter 🌟

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>

Column Offset 😃

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>

Column Order 🤙

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>

Column Sort 🤘

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>

Responsive 💫

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>

Exotic Responsive 🏝️

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>

API

Row

Col

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.

Updates

You can see table for update information.