.grid-container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "headerleft header headerright"
    "whitewraperleft whitewrapper whitewrapperright"
    "greenwrapperleft greenwrapper greenwrapperright"
    "footerleft footer footerright";
  }

/*  grid-template:
    "headerleft header headerright" 1fr 1300px 1fr
    "whitewraperleft whitewrapper whitewrapperright" 1fr 1300px 1fr
    "greenwrapperleft greenwrapper greenwrapperright" 1fr 1300px 1fr
    "footerleft footer footerright" 1fr 1300px 1fr;
}*/



.header {
  grid-area: header;
}
.head-left{
  grid-area: headerleft;
  background-color: #ffffff;
}
.head-right{
  grid-area: headerright;
  background-color: #ffffff;
}

.white-wrapper{
  grid-area: whitewrapper;
  background-color: #ffffff;
}
.white-wrapperleft{
  grid-area: whitewrapperleft;
  background-color: #ffffff;
}
.white-wrapperright{
  grid-area: whitewrapperright;
  background-color: #ffffff;
}

.green-wrapper{
  grid-area: greenwrapper;
  background-color: #7bc142;
}
.green-wrapperleft{
  grid-area: greenwrapperleft;
  background-color: #7bc142;
}
.green-wrapperright{
  grid-area: greenwrapperright;
  background-color: #7bc142;
}

.footer {
  grid-area: footer;
  background-color: #696768;
}
.footer-left {
  grid-area: footerleft;
  background-color: #696768;
}
.footer-right {
  grid-area: footerright;
  background-color: #696768;
}