asb_cloud_front/src/components/Grid.tsx

import React from 'react'

interface ComponentProps {
  children?: React.ReactNode
  style?: React.CSSProperties
  [other: string]: any
}

interface GridItemProps extends ComponentProps {
  children?: React.ReactNode
  style?: React.CSSProperties
  row: number
  col: number
  rowSpan?: number
  colSpan?: number
}

const gridDefaultStyle = {
  display: 'grid',
  margin: '8px',
  justifyItems: 'stretch',
  alignItems: 'stretch',
}

export const Grid = ({ children, style, ...other }: ComponentProps) => (
  <div style={{...gridDefaultStyle, ...style}} {...other}>
    {children}
  </div>
)

export const GridItem = ({ children, row, col, rowSpan, colSpan, style, ...other }: GridItemProps) => {
  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',
    ...style,
  }

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

export const Flex = ({ children, style, ...other } : ComponentProps) => (
  <div style={{ display: 'flex', ...style }} {...other}>
    {children}
  </div>
)