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
prop | type | description |
---|---|---|
x |
number | Either a number from 0–1 or 2–12 that represents a percentage width or number of columns in a 12-column grid |
sm |
number | Width from the sm breakpoint and up |
md |
number | Width from the md breakpoint and up |
lg |
number | Width from the lg breakpoint and up |
px |
number | Left and right padding as a number 0–6 representing a step on the spacing scale |
align |
string | Sets vertical-align, either top , middle , bottom , or baseline |
MIT License