React BEM Grid

A BEM-ified port of Flexbox Grid to a simple, reusable React component.

NPM

npm install --save react-bem-grid

Usage

import React from 'react';
import { Grid, Row, Col } from 'react-bem-grid';
 
class GridExample extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Col xs={12} sm={6} lg={4}>
            ...
          </Col>
          <Col xs={12} sm={6} lg={4}>
            ...
          </Col>
          <Col xs={12} sm={6} lg={4}>
            ...
          </Col>
        </Row>
      </Grid>
    );
  }
}

Include the css file in the way that best suits your project, if you're using Webpack, we recommend using CSS loader.

Documentation

See all the documentation including live examples

• Responsive
• Offsets
• Auto Width
• Nested Grids
• Custom Element Type
• Alignment
  • Start
  • Center
  • End
  • Top
  • Middle
  • Bottom
• Distribution
  • Around
  • Between
• Reordering
  • First
  • Last
• Reversing

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

<Grid>
  <Row>
    <Col xs={12} sm={8} md={6} lg={4}>
      ...
    </Col>
  </Row>
</Grid>

Offsets

Offset a column.

<Grid>
  <Row>
    <Col xs={8} xsOffset={4} sm={6} smOffset={6} lg={12}>
      ...
    </Col>
  </Row>
</Grid>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<Grid>
  <Row>
    <Col xs>
      ...
    </Col>
    <Col xs>
      ...
    </Col>
    <Col xs>
      ...
    </Col>
  </Row>
</Grid>

Nested Grids

Nest grids inside grids inside grids.

<Grid>
  <Row>
    <Col xs={12}>
      <Row>
        <Col xs={6}>
          <Row>
            <Col xs={4}>
              ...
            </Col>
            <Col xs={4}>
              ...
            </Col>
            <Col xs={4}>
              ...
            </Col>
          </Row>
        </Col>
        <Col xs={6}>
        <Row>
          <Col xs={6}>
            ...
          </Col>
          <Col xs={6}>
            ...
          </Col>
        </Row>
        </Col>
      </Row>
    </Col>
  </Row>
</Grid>

Custom Element Type

Add the componentClass property to override the default element type of a Grid, Row or Col.

<Grid>
  <Row componentClass='nav'>
    <Col xs={6}>
      ...
    </Col>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Alignment

Add properties to align elements to the start or end of a row as well as the top, bottom, or center of a column.

Start

<Grid>
  <Row xsStart>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Center

<Grid>
  <Row xsCenter>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

End

<Grid>
  <Row xsEnd>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Here is an example of using the modifiers in conjunction to achieve different alignment at different viewport sizes.

<Grid>
  <Row xsCenter smEnd lgStart>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Top

<Grid>
  <Row xsTop>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Middle

<Grid>
  <Row xsMiddle>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Bottom

<Grid>
  <Row xsBottom>
    <Col xs={6}>
      ...
    </Col>
  </Row>
</Grid>

Distribution

Add properties to distribute the contents of a row or column.

Around

<Grid>
  <Row xsAround>
    <Col xs={2}>
      ...
    </Col>
    <Col xs={2}>
      ...
    </Col>
    <Col xs={2}>
      ...
    </Col>
  </Row>
</Grid>

Between

<Grid>
  <Row xsBetween>
    <Col xs={2}>
      ...
    </Col>
    <Col xs={2}>
      ...
    </Col>
    <Col xs={2}>
      ...
    </Col>
  </Row>
</Grid>

Reordering

Add properties to reorder columns.

First

<Grid>
  <Row>
    <Col xs={4}>
      1
    </Col>
    <Col xs={4}>
      2
    </Col>
    <Col xs={4} xsFirst>
      3
    </Col>
  </Row>
</Grid>

Last

<Grid>
  <Row>
    <Col xs={4} xsLast>
      1
    </Col>
    <Col xs={4}>
      2
    </Col>
    <Col xs={4}>
      3
    </Col>
  </Row>
</Grid>

Reversing

<Grid>
  <Row reverse>
    <Col xs={4}>
      1
    </Col>
    <Col xs={4}>
      2
    </Col>
    <Col xs={4}>
      3
    </Col>
  </Row>
</Grid>

Example project

First, clone react-bem-grid, install dependencies and build the project:

git clone https://github.com/nordnet/react-bem-grid.git
npm install
npm run build

Then run the simple-grid or documentation example project:

cd examples/simple-grid
npm install
npm start

License

MIT © Nordnet Bank AB