Using react-flexbox-grid in your react application

react-flexbox-grid is a great grid component layout library built for React, based on flexbox-grid.

Installation and setup

To install react-flexbox-grid, simply install it via npm:

$ npm install --save-dev react-flexbox-grid

To set it up with your webpack config you can add the following code to your webpack configuration file:
webpack.config.js

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.s?css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]',
          'sass-loader',
        ],
        include: /node_modules\/(react-toolbox|flexboxgrid)/,
      }
    ],
  },
  ...
};

The setup above is used for react-flexbox-grid and for react-toolbox, if you are not using react-toolbox you can just remove that piece from the configuration above.

Usage

To use react-flexbox-grid in your project you need to import the components you want to use (Grid, Row or Column), and use them just like you would any other React component.
/app/my-new-component.jsx

import { Grid, Row, Col } from 'react-flexbox-grid/lib/index';

const MyNewComponent = () => (
  <Grid className="my-new-component">
    <Row>
      <Col xs={12} sm={6} md={4} lg={3}>Column content here</Col>
      <Col xs={12} sm={6} md={4} lg={3}>Column content here</Col>
      <Col xs={12} sm={6} md={4} lg={3}>Column content here</Col>
    </Row>
  </Grid>
);

export default MyNewComponent;

For the full list of settings and features, have a look at the react-flexbox-grid website and Github page:
react-flexbox-grid website: http://roylee0704.github.io/react-flexbox-grid/
react-flexbox-grid GitHub: https://github.com/roylee0704/react-flexbox-grid