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
test
.gitignore
.npmignore Init Feb 24, 2016
.travis.yml
README.md
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