.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Supplies different heights for the rows */
  grid-template-rows: 50px 1fr 50px;
}
.top{
  background-color: lightskyblue;

  /* Define header component area using line numbers */
  grid-area: 1/1/2/4;
  /* OR */
  /* Define header component area by grid start point and number of spans over grids */
  grid-area: 1/1/span 1/span 3;
}

.sidebar{
  background-color: lightsalmon;

  grid-area: 2/1/3/2;
  /* OR */
  grid-area: 2/1/span 1/ span 1;
}

.main{
  background-color: lightgoldenrodyellow;

  grid-area: 2/2/3/4
  /* OR */
  grid-area: 2/2/span 1/ span 2;
}
.bottom{
  background-color: yellowgreen;

  grid-area: 3/1/4/4;
  /* OR */
  grid-area: 3/1/span 1/span 3;
}