css-grid - presentation - live-pen F

/*Downloaded from https://www.codeseek.co/hmmh/css-grid-presentation-live-pen-f-MVOGog */
.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "header" "sidebar" "content" "footer";
}
@media only screen and (min-width: 480px) {
  .grid {
    grid-auto-rows: minmax(150px, auto);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "header header header" "sidebar content content" "footer footer footer";
  }
}

.box {
  background: #c82506;
  color: #fff;
}
.box:nth-child(odd) {
  background: #ff0000;
}

header {
  grid-area: header;
}

.b {
  grid-area: sidebar;
}

.c {
  grid-area: content;
}

.d {
  grid-area: footer;
}