.container{
    display:grid;
    grid-template-columns: repeat(6, 210px);
    grid-template-rows: repeat(12, 60px);
    gap:15px;    
}

.box{
    background:#8cc63f;
    color:white;
    text-align: center;
    font-size:18px;    
}


.box1{ 
    grid-column:1; grid-row:1 / 13; 
}


.box2{ 
    grid-column:2; grid-row:1 / 7;
 }
.box3{ 
    grid-column:2; grid-row:7 / 13;
 }


.box4{ 
    grid-column:3; grid-row:1 / 5;
 }
.box5{ 
    grid-column:3; grid-row:5 / 9;
 }
.box6{ 
    grid-column:3; grid-row:9 / 13;
 }

.box7{ 
    grid-column:4; grid-row:1 / 4;
 }
.box8{ 
    grid-column:4; grid-row:4 / 7;
 }
.box9{
    grid-column:4; grid-row:7 / 10;
 }
.box10 { 
    grid-column:4; grid-row:10 / 13;
 }


.box11 { 
    grid-column:5; grid-row:1 / 3;
 }
.box12 { 
    grid-column:5; grid-row:3 / 5; 
}
.box13 { 
    grid-column:5; grid-row:5 / 7; 
}
.box14 { 
    grid-column:5; grid-row:7 / 9; 
}
.box15 { 
    grid-column:5; grid-row:9 / 11; 
}
.box16 { 
    grid-column:5; grid-row:11 / 13; 
}

.box17 { 
    grid-column:6; grid-row:1 / 2; 
}
.box18 { 
    grid-column:6; grid-row:2 / 3; 
}
.box19 { 
    grid-column:6; grid-row:3 / 4; 
}
.box20 { 
    grid-column:6; grid-row:4 / 5; 
}
.box21 { 
    grid-column:6; grid-row:5 / 6; 
}
.box22 { 
    grid-column:6; grid-row:6 / 7; 
}
.box23 { 
    grid-column:6; grid-row:7 / 8; 
}
.box24 { 
    grid-column:6; grid-row:8 / 9; 
}
.box25 { 
    grid-column:6; grid-row:9 / 10; 
}
.box26 { 
    grid-column:6; grid-row:10 / 11; 
}
.box27 { 
    grid-column:6; grid-row:11 / 12; 
}
.box28 { 
    grid-column:6; grid-row: 12 / 13; 
}