Skip to content
A way to quickly add a Grid Layout to your React app πŸš€
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit c169ec0 Nov 30, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Added autoprefixer 😎 Apr 3, 2017
example Added span = 0 Jun 7, 2018
src feat: add stretch option to align Nov 29, 2019
.babelrc Initialize Package βœ”οΈ Apr 2, 2017
.eslintrc Initialize Package βœ”οΈ Apr 2, 2017
.gitignore Change ignore files Jun 11, 2018
.npmignore Change ignore files Jun 11, 2018
LICENSE Initial commit Mar 31, 2017
README.md feat: add stretch option to align Nov 29, 2019
package-lock.json Package-lock fix Nov 29, 2019
package.json Upgrade version Nov 29, 2019

README.md

ReactSimpleFlexGrid

npm version

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

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

Imgur

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>

Imgur

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>

Imgur

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>

Imgur

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>

Imgur


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

Imgur


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

Imgur

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>

Imgur

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>

Imgur

API

Row

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

Col

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.

Updates

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
You can’t perform that action at this time.