Minimal responsive React grid system based on the Fab Four Technique.
- 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
npm i gximport 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 MyComponentcol(number) - Width of column above the breakpoint. Based on a 12 column grid. Default:6breakpoint(number) - Width in pixels at which columns render side-by-side. Default:512
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
}
}
}
}<div>
<Gx col={4}>Col 4</Gx>
<Gx col={4}>Col 4</Gx>
<Gx col={4}>Col 4</Gx>
</div><div>
<Gx col={7}>Col 7</Gx>
<Gx col={5}>Col 5</Gx>
</div>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><div>
<Gx col={6}>
<Gx col={6}>Nested</Gx>
<Gx col={6}>Nested</Gx>
</Gx>
<Gx col={6}>Col 6</Gx>
</div><div>
<Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
<Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent