.container {
  display: grid;
  grid-template-rows: 1fr 1fr 3fr 3fr 2fr 2fr 2fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header header" "menu menu" "hero hero" "main main"
    "banner banner" "extra extra" "image image";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: hero;
}

.item4 {
  grid-area: main;
}

.item7 {
  grid-area: banner;
}

.item6 {
  grid-area: extra;
}

.item5 {
  grid-area: image;
}