.header { grid-area: header; }
.leftside { grid-area: left; }
.main { grid-area: main; }

.grid-container {
  display: grid;
  grid-template-columns: 22% 78%;
  grid-template-areas:
    'header header'
    'left main';
  grid-gap: 0px;
  padding: 10px;
}

@media only screen and (max-width: 600px) {
    .grid-container {
      display: grid;
      grid-template-columns: 100%;
      grid-template-areas:
      'header'
      'left' 
      'main';
      grid-gap: 0px;
      padding: 10px;
    }
}

.header {
    text-align:center;
}

.leftside {
    background-color:#EEEEFF;
    text-align:center;
    border: 1px solid;
    padding: 10px;
}
    
.main {
    border-width: 1px;
    border-style: solid solid solid none;
    padding: 10px;
}