Minimal responsive React grid system based on the Fab Four Technique.
HTML JavaScript
Latest commit 54a50e1 Sep 20, 2016 @jxnblk committed on GitHub Merge pull request #3 from npmcdn-to-unpkg-bot/npmcdn-to-unpkg
Replace npmcdn.com with unpkg.com
Permalink
Failed to load latest commit information.
.github Init Feb 24, 2016
docs Replace npmcdn.com with unpkg.com Sep 3, 2016
src Use context for configuration Feb 29, 2016
test Use context for configuration Feb 29, 2016
.gitignore Init Feb 24, 2016
.npmignore Init Feb 24, 2016
.travis.yml Edit travis.yml Feb 25, 2016
README.md Add nesting example Feb 29, 2016
index.html Replace npmcdn.com with unpkg.com Sep 3, 2016
package.json Bump beta version May 11, 2016

README.md

Gx

Build Status

Minimal responsive React grid system based on the Fab Four Technique.

http://jxnblk.com/gx

Features

  • Element-query-like behavior
  • No CSS dependencies
  • No client-side JS
  • Works with server-side rendering
  • Works in email
  • Single React component
  • <1KB gzipped & minified

Getting Started

npm i gx
import React from 'react'
import Gx from 'gx'

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        <Gx col={7}>
          <h1>Left Column</h1>
        </Gx>
        <Gx col={5}>
          <h2>Right Column</h2>
        </Gx>
      </div>
    )
  }
}

export default MyComponent

Props

  • col (number) - Width of column above the breakpoint. Based on a 12 column grid. Default: 6
  • breakpoint (number) - Width in pixels at which columns render side-by-side. Default: 512

Configuration

A custom breakpoint value can be set with React context.

class MyComponent extends React.Component {
  static childContextTypes = {
    gx: React.PropTypes.object
  }

  getChildContext () {
    return {
      gx: {
        breakpoint: 768
      }
    }
  }
}

Examples

3 Columns

<div>
  <Gx col={4}>Col 4</Gx>
  <Gx col={4}>Col 4</Gx>
  <Gx col={4}>Col 4</Gx>
</div>

7/5 Split

<div>
  <Gx col={7}>Col 7</Gx>
  <Gx col={5}>Col 5</Gx>
</div>

Wrapping

Because Gx uses display: inline-block, grid cells automatically wrap.

<div>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
</div>

Nesting

<div>
  <Gx col={6}>
    <Gx col={6}>Nested</Gx>
    <Gx col={6}>Nested</Gx>
  </Gx>
  <Gx col={6}>Col 6</Gx>
</div>

Custom Breakpoint

<div>
  <Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
  <Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
</div>

Demo

http://jxnblk.com/gx

MIT License