React Inline Grid

A predictable gird layout based on flexbox for React applications using inline styles.

Install

npm install react-inline-grid --save

API

Sample Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, Row, Cell } from 'react-inline-grid';

const Layout = React.createClass({
  render() {
    return (
      <Grid>
        <Row is="center">
          <Cell is="3 tablet-4 phone-4"><div>content_a</div></Cell>
          <Cell is="3 tablet-4 phone-4"><div>content_b</div></Cell>
        </Row>
      </Grid>
    );
  }
});

ReactDOM.render(<Layout />, document.body);

The library exports Grid, Row and Cell.

<Grid />

Grid wrap inner components with React Redux <Provider>.

Using Redux, Grid's inner components can react to store update. Here Redux is used to handle MediaQueryList changes and update components style property:

// phone
<div style="...; width: calc(100% - 16px);"><div>

// tablet
<div style="...; width: calc(50% - 16px);"><div>

// desktop
<div style="...; width: calc(25% - 16px);"><div>

Grid exposes the property options allowing you to define custom grid settings.

options shape:

{
  columns: number     // default = 12     - Columns size for the bigger media.
  gutter: number      // default = 16     - Gutter size in pixel.
  margin: number      // default = 16     - Margin size in pixel.
  deaf: bool          // default = false  - Ignore MediaQueryList updates.
  list: [             // default = [...]  - List of target media.
    { 
      name: string    // required                     - Media name.
      query: string   // required                     - Media query to test.
      gutter: number  // default = options -> gutter  - Media gutter size in pixel.
      margin: number  // default = options -> margin  - Media margin size in pixel.
    }
  ]
}

If options is not provided, or invalid, it will be fixed to apply values inspired by Google Material Design Lite grid layout:

// options -> list
[
  {
    name: 'phone',
    gutter: 16,
    margin: 16,
    columns: 4,
    query: '(max-width: 479px)'
  },
  {
    name: 'tablet',
    gutter: 16,
    margin: 16,
    columns: 8,
    query: '(min-width: 480px) and (max-width: 839px)'
  },
  {
    name: 'desktop',
    gutter: 16,
    margin: 16,
    columns: 12,
    query: '(min-width: 840px)'
  }
]

If no media match the queries, Grid will define the first options -> list -> value as default current media in order to match the "popular" mobile first approch.

<Row />

Exposes the property is (string) to update the following default style object:

{
  display: 'flex',
  flexFlow: 'row wrap',
  alignItems: 'stretch'
}

is specify the justify-content style property as:

• start
• center
• end
• around
• between

<Row is="center phone-end">
  <Cell>
    <div>Content</div>
  </Cell>
</Row>

// not phone
<div style="...; justify-content:center;">
  <Cell>
    <div>Content</div>
  </Cell>
</div>

// phone
<div style="...; justify-content:flex-end;">
  <Cell>
    <div>Content</div>
  </Cell>
</div>

<Cell />

Exposes the property is (string) to update the following default style object:

{
  boxSizing: 'border-box'
}

is specify cell size and align-self style property as:

• <value>
• <media name?>-<value>
• <media name?>-offset-<value>
• top
• middle
• bottom
• stretch

<Row>
  <Cell is="middle 4 tablet-2 offset-1">
    <div>Content</div>
  </Cell>
</Row>

// desktop
<Row>
  <div style="...; width:calc(33.33...% - 16px);align-self:center;margin-left:calc(8.33...% - 8px);">
    <div>Content</div>
  </div>
</Row>

// tablet
<Row>
  <div style="...; width:calc(12.5% - 16px);align-self:center;margin-left:calc(25% - 8px);">
    <div>Content</div>
  </div>
</Row>

// phone
<Row>
  <div style="...; width:calc(25% - 16px);align-self:center;margin-left:calc(100% - 8px);">
    <div>Content</div>
  </div>
</Row>

For both <Row /> and <Cell />, is property ask for an "already defined" values, the last one is used:

<Cell is="3 2 1">
  <div>Content</div>
</Cell>

// will be defined as

<Cell is="1">
  <div>Content</div>
</Cell>

Examples

The gh-pages page of this repository use some patterns as examples, but feel free to play and test your layouts using the examples folder.

Run the gh-pages example:

git clone https://github.com/broucz/react-inline-grid.git

cd react-inline-grid
npm install

cd examples/react-transform-boilerplate
npm install

npm start
open http://localhost:3000/

Thanks

• Redux I learned a lot from package evolution, author @gaearon, contributors, and related discussions.
• React for the fun.
• React Redux to make it easier.