I need to understand grid template rules

  
  <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;
}


The container grid template only have 13 columns and on the banner grid area shows 14 instead of 13, but when I change it to 13, it does not spread to the full width of the page. so if I change it to 14 it will extend to the full length of the page, but why? and it does make sense since like i mentioned there is only 13 columns, pls help me understand this ty
Was this page helpful?