h1 {
  text-align: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 20px;
  color: burlywood;
}

.parent{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  height: 98vh;
}
.child {
  background-color: yellow;
  border: 1px solid black;
  border-radius: 15px;
}
.div1 {
  grid-column: 1/ 13;
  grid-row: 1/ 2;
}
.div2 {
  grid-column: 1/ 7;
  grid-row: 2/3;
}
.div3 {
  grid-column: 7/ 13;
  grid-row: 2/ 3;
}
.div4 {
  grid-column: 1/5;
  grid-row: 3/ 4;
}
.div5 {
  grid-column: 5/ 9;
  grid-row: 3/ 4;
}
.div6 {
  grid-column: 9/ 13;
  grid-row: 3/ 4;
}
.div7 {
  grid-column: 1/ 4;
  grid-row: 4/ 5;
}
.div8 {
  grid-column: 4/ 7;
  grid-row: 4/ 5;
}
.div9 {
  grid-column: 7/ 10;
  grid-row: 4/ 5;
}
.div10 {
  grid-column: 10/ 13;
  grid-row: 4/ 5;
}
.div11 {
  grid-column: 1/ 3;
  grid-row: 5/ 6;
}
.div12 {
  grid-column: 3/ 5;
  grid-row: 5/ 6;
}
.div13 {
  grid-column: 5/ 7;
  grid-row: 5/ 6;
}
.div14 {
  grid-column: 7/ 9;
  grid-row: 5/ 6;
}
.div15 {
  grid-column: 9/ 11;
  grid-row: 5/ 6;
}
.div16 {
  grid-column: 11/ 13;
  grid-row: 5/ 6;
}