import {Grid, Cell} from 'glare'
import React, {Component} from 'react'
import {render} from 'react-dom'
 
const styles = {
  wrapper: {
    gridGap: '10px'
  },
  cell: {
    backgroundColor: '#444',
    color: '#f2f2f2',
    padding: '20px',
    fontSize: '150%'
  }
}
 
class Dashboard extends Component {
  render() {
    return (
      <Grid style={styles.wrapper} columns={2}>
        <Cell style={styles.cell}>a</Cell>
        <Cell style={styles.cell}>b</Cell>
        <Cell style={styles.cell}>c</Cell>
        <Cell style={styles.cell}>d</Cell>
      </Grid>
    )
  }
}
 
render(
  <Dashboard />,
  document.body
)

<Grid
  columns={ number }  // the number of columns desired for the grid
  layout={ array }    // an array of cell names to use for layout
/>

<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]
/>