body{
    margin-left: 100px;
    margin-right: 100px;
}
.parent{
    display: grid;
    grid-template-rows: repeat(12,1fr);
    grid-template-columns: repeat(6,1fr);
    padding: 10px;
    gap: 5px;
    height: 400px;

}
.box{
    background-color: blueviolet;
    display: grid;
    place-items: center;
     font-size: 20px; 
     font-weight: bold;
}
.child-1{
    grid-row: 1/13;
}
.child-2{
    grid-row:1/7;
}
.child-3{
    grid-row: 7/13;
}
.child-4{
    grid-row:1/5 ;

}
.child-5{
    grid-row: 5/9;
}
.child-6{
    grid-row: 9/13;
}
.child-7{
    grid-row: 1/4;
}
.child-8{
   grid-row:4/7;
}
.child-9{
    grid-row: 7/10;
}
.child-10{
    grid-row: 10/13;
}
.child-11{
    grid-row: 1/3;
}
.child-12{
    grid-row: 3/5;
}.child-13{
    grid-row: 5/7;
}.child-14{
    grid-row: 7/9;
}.child-15{
    grid-row: 9/11;
}.child-16{
    grid-row: 11/13;
}.child-17{
    grid-row: 1/2;
}.child-18{
    grid-row: 2/3;
}.child-19{
    grid-row: 3/4;
}.child-20{
    grid-row: 4/5;
}.child-21{
    grid-row: 5/6;
}.child-22{
    grid-row: 6/7;
}.child-23{
    grid-row: 7/8;
}
.child-24{
    grid-row: 8/9;
}
.child-25{
    grid-row: 9/10;
}.child-26{
    grid-row: 10/11;
}
.child-27{
    grid-row: 11/12;
}
.child-28{
    grid-row: 12/13;
}