export const Grid = ({children, ...other}) => {
  const gridContainerStyle = {
    display: 'grid',
    margin: '8px',
    justifyItems: 'stretch',
    alignItems: 'stretch',
    ...other,
  }

  return <div style={gridContainerStyle}>
    {children}
  </div>
}

export const GridItem = ({children, row, col, rowSpan, colSpan, ...other}) => {
  const localRow = +row
  const localCol = +col
  const localColSpan = colSpan ? colSpan - 1 : 0
  const localRowSpan = rowSpan ? rowSpan - 1 : 0
  const gridItemStyle = {
    gridColumnStart: localCol,
    gridColumnEnd: localCol + localColSpan,
    gridRowStart: localRow,
    gridRowEnd: localRow + localRowSpan,
    padding: '4px',
    ...other,
  }

  return <div style={gridItemStyle}>
    {children}
  </div>
}