Divlerden tablo oluşturup Nth-child kullanarak özelleştirme konusunda yardım

Merhabalar,
Aşağıdaki gibi bir tablo görünümüne sahip olmaya çalışıyorum. Bootstrap veya normal css kullanarak da olabilir. Divlere nth-child tanımlayarak ortadaki karelerin oluşturulması konusunda ücretli veya ücretsiz yardımcı olabilecek arkadaşlar PM ile iletişime geçerse çok sevinirim.

CSS:

.sutun{    
     position:relative
}

.sutun::after{
    content:"";    
    position:absolute;
    right:0;
    bottom:0;
    display: block;
    width:10px;
    height: 10px;
    background-color:#333;
    border:3px solid #FFF;
    transform: translate(50%,50%);
}

SCSS:

.sutun{
    position:relative;

    &::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        display: block;
        width:10px;
        height: 10px;
        background-color:#333;
        border:3px solid #FFF;
        transform: translate(50%,50%);
    }
}

Ekleme:
Son elementin bu değeri almasını istemiyorsanız,

.sutun::last-child::after{
    display:none;
}

SCSS:

.sutun{
    position:relative;

    &::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        display: block;
        width:10px;
        height: 10px;
        background-color:#333;
        border:3px solid #FFF;
        transform: translate(50%,50%);
    }

    &::last-child{
         &::after{
            display:none;
         }
    }
}