glare
CSS Grid Layout for React
Browser Support
CSS Grid Layout is under development in most browsers. Can I use... lists support.
Support can be enabled in Chrome by toggling chrome://flags/#enable-experimental-web-platform-features on.
Install
Using npm:
npm install --save glare
The UMD build is also available on npmcdn.com:
<script src="https://npmcdn.com/glare/dist/glare.js"></script>
<script src="https://npmcdn.com/glare/dist/glare.min.js"></script>
Example
const styles = wrapper: gridGap: '10px' cell: backgroundColor: '#444' color: '#f2f2f2' padding: '20px' fontSize: '150%' { return <Grid style=styleswrapper columns=2> <Cell style=stylescell>a</Cell> <Cell style=stylescell>b</Cell> <Cell style=stylescell>c</Cell> <Cell style=stylescell>d</Cell> </Grid> }
API
Grid
<Grid columns= number // the number of columns desired for the grid layout= array // an array of cell names to use for layout/>
Cell
<Cell name= string // the name to reference in the <Grid /> layout prop column= array // the column start and end values, e.g. [1, 2] row= array // the row start and end values, e.g. [1, 2]/>
License
Released under the MIT license: opensource.org/licenses/MIT