1.0.0-beta.1 • Published 8 years ago

react-cxs-grid v1.0.0-beta.1

Weekly downloads
1
License
MIT
Repository
-
Last release
8 years ago

react-cxs-grid

React grid system built with cxs

npm i react-cxs-grid
  • Grid layout based on display: inline-block
  • Fully encapsulated CSS using cxs
  • No external CSS dependencies
  • Simple API that promotes composability
// Example
import React from 'react'
import Grid from 'react-cxs-grid'

class App extends React.Component {
  render () {
    return (
      <div>
        <Grid sm={4} px={2}>
          Left Column
        </Grid>
        <Grid sm={8} px={2}>
          Right Column
        </Grid>
      </div>
    )
  }
}

export default App

Props

proptypedescription
xnumberEither a number from 0–1 or 2–12 that represents a percentage width or number of columns in a 12-column grid
smnumberWidth from the sm breakpoint and up
mdnumberWidth from the md breakpoint and up
lgnumberWidth from the lg breakpoint and up
pxnumberLeft and right padding as a number 0–6 representing a step on the spacing scale
alignstringSets vertical-align, either top, middle, bottom, or baseline

MIT License