* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: cyan;
}

.grid-container {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  padding: 10px;
}

.box {
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border: 1px dashed black;
  color: black;
  border-radius: 6px;
}

.box:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: #f4e242;
}
.box:nth-child(2) {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
  background: #f49b00;
}
.box:nth-child(3) {
  grid-column: 5 / 5;
  grid-row: 1 / 2;
  background: #e14b3d;
}
.box:nth-child(4) {
  grid-column: 4 / 6;
  grid-row: 2 / 4;
  background: #e63a80;
}
.box:nth-child(5) {
  grid-column: 6 / 7;
  grid-row: 1 / 2;
  background: #9525a3;
}
.box:nth-child(6) {
  grid-column: 7 / 8;
  grid-row: 1 / 2;
  background: #5840b0;
}
.box:nth-child(7) {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background: #3d3da1;
}
.box:nth-child(8) {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  background: #2781cc;
}
.box:nth-child(9) {
  grid-column: 4 / 5;
  grid-row: 2 / 4;
  background: #22a9f1;
}
.box:nth-child(10) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
  background: #21bac9;
}
.box:nth-child(11) {
  grid-column: 5 / 6;
  grid-row: 4 / 5;
  background: #11837e;
}
.box:nth-child(12) {
  grid-column: 6 / 8;
  grid-row: 2 / 5;
  background: #4e964b;
}
.box:nth-child(13) {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  background: #a0cc6b;
}
.box:nth-child(14) {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  background: #b6db55;
}
.box:nth-child(15) {
  grid-column: 3 / 5;
  grid-row: 4 / 6;
  background: #f5b622;
}
.box:nth-child(16) {
  grid-column: 5 / 6;
  grid-row: 5 / 6;
  background: #ff722e;
}
.box:nth-child(17) {
  grid-column: 6 / 7;
  grid-row: 5 / 6;
  background: #7b5c47;
}
.box:nth-child(18) {
  grid-column: 6 / 8;
  grid-row: 5 / 6;
  background: #5f7177;
}
.box:nth-child(19) {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  background: #2fd86f;
}
.box:nth-child(20) {
  grid-column: 3 / 4;
  grid-row: 6 / 7;
  background: #e03e7f;
}
.box:nth-child(21) {
  grid-column: 4 / 5;
  grid-row: 6 / 7;
  background: #8df10b;
}
.box:nth-child(22) {
  grid-column: 5 / 7;
  grid-row: 6 / 8;
  background: #f2c52c;
}
.box:nth-child(23) {
  grid-column: 7 / 8;
  grid-row: 6 / 7;
  background: #e53745;
}
.box:nth-child(24) {
  grid-column: 7 / 9;
  grid-row: 7 / 8;
  background: #603de3;
}