Modifying grid areas with JS

Curriculum Help
1

I’m trying to create a rolling dice generator (a part of javaScriptMas) and it’s working fine except the grid, from what i remember from the css grid section here, a dot character in the grid areas represents an empty cell but the circles still appear in strict order and not as they need to appear, any help?

body {
    background-color: #AEB8FE;
    display: flex;
    justify-content: center;
}

.dice {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    background-color: #EFE5DC;
    margin: 100px;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 15px;
    background-color: black;
}
var random = Math.floor(Math.random()*6) + 1;
    var dotElem = '';
    for (let i = 0; i < random; i++) {
        dotElem += '<div class="dot"></div>';
    }
    switch (random) {
        case 1: document.getElementById("dice").style.gridTemplateAreas = '". . ." ". cell ." ". . ."'; break;
        case 2: document.getElementById("dice").style.gridTemplateAreas = '"cell . ." ". . ." ". . cell"'; break;
        case 3: document.getElementById("dice").style.gridTemplateAreas = '"cell . ." ". cell ." ". . cell"'; break;
        case 4: document.getElementById("dice").style.gridTemplateAreas = '"cell . cell ". . ." "cell . cell"'; break;
        case 5: document.getElementById("dice").style.gridTemplateAreas = '"cell . cell ". cell ." "cell . cell"'; break;
        case 6: document.getElementById("dice").style.gridTemplateAreas = 'cell . cell "cell . cell" "cell . cell"'; break;
    }
    
    document.getElementById("dice").innerHTML = dotElem;