body {
  align-items: center;
  justify-content: center;
}

.largegrid {
  justify-content: center;
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(12, 80px);
    grid-template-rows: repeat(16, 60px);
    background-color: white;
}

.topcyanbox {
  display:block;
  grid-area: 1 / 1 / 1 / 3;
  background-color: cyan;
}
.toplimebox {
  display:block;
  grid-area: 1 / 3 / 1 / 12;
  background-color: lime;
}
.topyellowbox {
  display:block;
  grid-area: 1 / 12 / 1 / 12;
  background-color: gold;
}

.bluelargebox {
  display:block;
  grid-area: 2 / 1 / 6 / -1;
  background-color: deepskyblue;
}
.midcyanbox {
  display:block;
  grid-area: 6 / 1 / 9 / 5;
  background-color: lightskyblue;
}
.midgreenbox {
  display:block;
  grid-area: 6 / 5 / 9 / 9;
  background-color: seagreen;
}
.midorangebox {
  display:block;
  grid-area: 6 / 9 / 9 / -1;
  background-color: orange;
}

.lowpurplebox {
  display:block;
  grid-area: 9 / 1 / 14 / 7;
  background-color: purple;
}
.lowyellowbox {
  display:block;
  grid-area: 9 / 7 / 14 / -1;
  background-color: goldenrod;
}
.lowgreybox {
  display:block;
  grid-area: 14 / 1 / -1 / -1;
  background-color:grey;
}