Testing CSS Grids

/*Downloaded from https://www.codeseek.co/magnus16/testing-css-grids-MvQpax */
.container{
  display:grid;
     grid-gap:10px;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr;
  grid-template-areas: 
    "header   header"
    "sidebar sidebar "
    "maintop  mainbottom"
    "footer   footer";
  text-align:center;
}
.container * {
  padding:10px;
}
.header{
  background:yellow;
  grid-area:header;
  height:50px;
}
.sidebar{
  background:green;
  grid-area:sidebar;
}
.main-top{
  background:blue;
  grid-area:maintop;
}
.main-bottom{
  background:cyan;
  grid-area:mainbottom;
}
.footer{
  background:red;
  grid-area:footer;
}

@media screen and (min-width: 480px){
  .container{
    grid-template-rows:1fr 1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr 1fr;
     grid-template-areas: 
    "header   header      header"
    "sidebar  maintop     maintop"
    "sidebar  mainbottom  mainbottom"
    "sidebar  mainbottom  mainbottom"
    "footer   footer      footer";
  } 
  
}