CSS Grid

Layers.js

/*... render() {*/

<StyledGrid>
  <LayerTwo>yolo</LayerTwo>  
</StyledGrid>

/* }...*/

const StyledGrid = styled.div`
  display: grid;
  height: 100%;
  grid-template-columns: 2rem repeat(2, auto) 2rem;
  grid-template-rows: 4rem 4rem auto;
  background-color: #fff;
`;

const LayerTwo = styled.div`
  background-color: rgb(199, 120, 140);
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  transition: all 3s ease-in-out;
  -webkit-transition: all 3s ease-in-out;
  

  &:hover {
    grid-column-start: 2;
    grid-column-end: span 3;
    grid-row-start: 2;
    grid-row-end: span 2;
  };  
`;