
.parent {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  
}
.parent > div{
  border:solid red 1px;
}

.div1 {
  grid-area: 1 / 1 / 5 / 11;
 
}

.div2 {
  grid-area: 5 / 1 / 11 / 3;
 
}

.div3 {
  grid-area: 5 / 3 / 11 / 5;
 
}
.div4 {
  grid-area: 5 / 5 / 7 / 7;
 
}

.div5 {
  grid-area: 7 / 5 / 9 / 7;
 
}
.div6 {
  grid-area: 5 / 7 / 9 / 11;
  
}

.div7 {
  grid-area: 9 / 5 / 13 / 9;
 
}

.div8 {
  grid-area: 9 / 9 / 13 / 11;
 
}
.div9 {
  grid-area: 11 / 1 / 16 / 5;
 
}

.div10 {
  grid-area: 13 / 5 / 16 / 8;
 
}

.div11 {
  grid-area: 13 / 8 / 16 / 11;
 
}

.div12 {
  grid-area: 16 / 1 / 17 / 4;
 ;
}

.div13 {
  grid-area: 16 / 4 / 17 / 8;
 
}

.div14 {
  grid-area: 16 / 8 / 17 / 11;
 
}

