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

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

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

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