Skip to content
Predictable flexbox based grid for React.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
test
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
package.json
webpack.config.base.js
webpack.config.development.js
webpack.config.production.js

README.md

React Inline Grid

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

npm version

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