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

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