@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&family=Ubuntu&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  font-family: Ubuntu;
  font-size: 1.2rem;
  
  user-select: none;
}

body {
  height: 100vh;
  width: 100%;
  
  display: grid;
  place-items: center;
}

.container {
  height: 60%;
  width: 60%;
  
  border: 3px solid #000;
  background: #000;
  
  display: grid;
  grid-gap: 3px;
  grid-template-areas:
    "one two"
    "one three";
  
  transition: 1s;
}

.item {  
  display: grid;
  place-items: center;
  
  cursor: pointer;
}

.one {
  background: #FF5677;
  grid-area: one;
}

.two {
  background: #B958A5;
  grid-area: two;
}

.three {
  background: #4C3F91;
  color: #f6f6f6;
  grid-area: three;
}

const container = document.querySelector(".container");

const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");

one.addEventListener("click", () => {
  container.style.gridTemplateAreas = '"two two" "three one"';
});

two.addEventListener("click", () => {
  container.style.gridTemplateAreas = '"three three" "one two"';
});

three.addEventListener("click", () => {
  container.style.gridTemplateAreas = '"one one" "two three"';
});