.item1 {
  grid-area: area1;
}
.item2 {
  grid-area: area2;
}
.item3 {
  grid-area: area3;
}
.item4 {
  grid-area: area4;
}
.item5 {
  grid-area: area5;
}
.grid2-container {
  display: grid;
  grid-template-areas:
    "area1 area2 area3 area3"
    "area4 area5 area3 area3";
  gap: 3px;
  background-color: #fbfbfb;
  padding: 10px;
}
.grid2-container > div {
  background-color: #fbfbfb;
  text-align: center;
  padding: 20px 0;
}

@media (max-width: 999px) {
  .grid2-container {
    grid-template-areas:
      "area3 area3"
      "area1 area2"
      "area4 area5";
  }
}
@media (max-width: 450px) {
  .grid2-container {
    grid-template-areas:
      "area3"
      "area1"
      "area2"
      "area4"
      "area5";
  }
}