.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:#ccd69c;
  padding:1.5rem;
  border-radius:1rem;
  text-align: center;
  display:flex;
  justify-content:center;
  align-items:center;
}

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