.container {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-template-rows: repeat(12, 1fr);
 height: 80vh;
 margin: auto;
 gap: 15px;
}
.box {
 background: #9acd32;
 color: white;
 display : flex;
 align-items: flex-start;
 justify-content: center;
 font-size: 25px;
}

.a1 {
    grid-column: 1 / 3;
    grid-row: 1 / 13;
}
.a2 { 
    grid-column: 3 / 5; 
    grid-row: 1 / 7; }
.a3 { 
    grid-column: 3 / 5; 
    grid-row: 7 / 13;
    }
.a4 { 
    grid-column: 5 / 7; 
    grid-row: 1 / 5; 
}
.a5 { 
    grid-column: 5 / 7; 
    grid-row: 5 / 9; 
    }
.a6 { 
    grid-column: 5 / 7; 
    grid-row: 9 / 13; 
}
.a7  { 
    grid-column: 7 / 9; 
    grid-row: 1 / 4; }
.a8  { 
    grid-column: 7 / 9; 
    grid-row: 4 / 7; 
}
.a9  { 
    grid-column: 7 / 9; 
    grid-row: 7 / 10;
 }
.a10 { 
     grid-column: 7 / 9; 
     grid-row: 10 / 13;
    }
.a11 { 
        grid-column: 9 / 11; 
        grid-row: 1 / 3;
    }
.a12 { 
        grid-column: 9 / 11; 
        grid-row: 3 / 5; 
    }
.a13 { 
        grid-column: 9 / 11; 
        grid-row: 5 / 7; 
    }
.a14 { 
        grid-column: 9 / 11; 
        grid-row: 7 / 9;
    }
.a15 { 
        grid-column: 9 / 11; 
        grid-row: 9 / 11; 
    }
.a16 { 
        grid-column: 9 / 11; 
        grid-row: 11 / 13; 
    }
.a17 { 
    grid-column: 11 / 13; 
    grid-row: 1 / 2;
}
.a18 {
    grid-column: 11 / 13; 
    grid-row: 2 / 3; 
}
.a19 { 
    grid-column: 11 / 13; 
    grid-row: 3 / 4;
}
.a20 { 
    grid-column: 11 / 13; 
    grid-row: 4 / 5; 
}
.a21 { 
    grid-column: 11 / 13; 
    grid-row: 5 / 6; 
}
.a22 {
    grid-column: 11 / 13; 
    grid-row: 6 / 7;
}
.a23 { 
    grid-column: 11 / 13; 
    grid-row: 7 / 8; 
}
.a24 { 
    grid-column: 11 / 13; 
    grid-row: 8 / 9; 
}
.a25 { 
    grid-column: 11 / 13; 
    grid-row: 9 / 10; 
}
.a26 { 
    grid-column: 11 / 13; 
    grid-row: 10 / 11; 
}
.a27 { 
    grid-column: 11 / 13; 
    grid-row: 11 / 12; 
}
.a28 { 
    grid-column: 11 / 13; 
    grid-row: 12 / 13; 
}
body{
    padding: 50px;
}