I need to understand grid template rules

  
  <div id="container">
    
    <div class="banner"></div>
  </div>
  
  

  
  <div id="container">
    
    <div class="banner"></div>
  </div>
  
  

body {
  background-color: black
}

#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 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}

body {
  background-color: black
}

#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 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}