.item1 {
 grid-area: header;
}

.item2 {
 grid-area: navbar; 
}

.item3 {
 grid-area: content1; 
}

.item4 {
  grid-area: content2;
}

.item5 {
  grid-area: content3;
}

.item6 {
  grid-area: footer;
}

.grid {
  display: grid;
  height: 90vh;
  grid-template-columns: 300px;
  grid-gap: 1rem;
  grid-template-areas:
    "header header navbar navbar navbar"
    "content1 content1 content1 content2 content2"
    "content1 content1 content1 content3 content3"
    "footer footer footer footer footer";
}

.grid > div {
  background: #EDE7F6;
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  margin: 2rem;
  font: 12px system-ui;
}