need help with grid

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}