example.jsx

import React from 'react'
import { render } from 'react-dom'
import styled, { css } from 'styled-components'

const centerContent = css`
  display: flex;
  align-items: center;
  justify-content: center;
`

const border = css`
  border: 1px solid black;
`

const Grid = styled.div`
  display: grid;
  grid-template-columns: ${props => props.columns || ''};
  grid-template-rows: ${props => props.rows || ''};
  grid-gap: ${props => props.gap || '8px'};
`

const Cell = styled.div`
  grid-column-start: ${props => props.columnOffset};
  grid-column-end: ${props => 'span ' + props.width};
  grid-row-start: ${props => props.rowOffset};
  grid-row-end: ${props => 'span ' + props.height};
`

const FancyCell = styled(Cell)`
  ${centerContent};
  ${border};
`

const App = () => (
  <Grid rows='repeat(3, 150px)' columns='1fr 1fr 1fr'>
    <FancyCell columnOffset={1} width={2}>a grid cell</FancyCell>
    <FancyCell height={2}>a grid cell</FancyCell>
    <FancyCell height={2}>a grid cell</FancyCell>
    <FancyCell>this is comfy</FancyCell>
    <FancyCell width={2}>a grid cell</FancyCell>
  </Grid>
)

render(<App />, document.getElementById('root'))