.grid {
  display: grid;
  grid-template-columns: 10% 15% auto 15% 10%;
  grid-template-rows: 200px auto 50px;
  text-align: center;
  color: #fff;
  
  &__header {
    background: #f00;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  
  &__main {
    background: #0f0;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
    min-height: 100px;
  }
  
  &__footer {
    background: #00f;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 4;
  }
  
  &__sidebar-left {
    background: #0ff;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  
    &__sidebar-right {
    background: #ff0;
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
  }
}