grid.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: grey;
  display: grid;
  place-items: center;
  margin: auto;
  width: 100%;
  height: 100vh;
 
}
main {
  display: grid;
  grid-template-areas:
    "a a a b"
    "a a a b"
    "c d d d"
    "c e e e";
  gap: 5px;
  width: 80%;
  margin: auto;  
}
main div {
  padding: 2em;
  text-align: center;
}
.item-a {
  background-color: blueviolet;
  grid-area: a;
}
.item-b {
  background-color: blue;
  grid-area: b;
}
.item-c {
  background-color: white;
  grid-area: c;
}
.item-d {
  background-color: brown;
  grid-area: d;
}
.item-e {
  background-color: tomato;
  grid-area: e;
}