Collapsible CSS Grid

GridSpace.js

const GridSpace = styled.section`
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto fit-content(100%);
  grid-template-areas:
    'c c c c'
    't t t t';
`

const GridChart = styled.div`
  background-color: #ccc;
  grid-area: c;
  display: flex;
  flex-direction: column;
`

const GridTable = styled.div`
  background-color: #ddd;
  grid-area: t;
  display: flex;
  flex-direction: column;
`

const DataGrid = props => {
  const [expanded, setExpanded] = React.useState(true)
  return (
    <GridSpace>
      <GridChart>
        Grid Chart
      </GridChart>
      <GridTable>
        <Button size='small' color='primary' onClick={e => setExpanded(!expanded)}>
          {expanded ? 'Close' : 'Open'}
        </Button>
        {expanded && <p>Grid Table</p>}
      </GridTable>
    </GridSpace>
  )
}