.item1 {
  grid-area: header;
}

.item2 {
  grid-area: navbar;
}

.item3 {
  grid-area: content3;
}

.item4 {
  grid-area: content4;
}

.item5 {
  grid-area: content5;
}

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

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