Deseo mostrar cada carácter de mi matriz en un cuadro en una sola fila (ver imagen a continuación) usando javascript.

Cuando uso la cuadrícula, se muestra solo en una columna y, a veces, mi cuadro está vacío.

Aquí está mi siguiente código funcionando, pero solo muestra caracteres sin css

 var questionParse = JSON.parse(currentQuestion.question); //here is for example surreal //display letters in random order for (let i = questionParse.length; i >= 0; i--) { const randLetters = Math.floor(Math.random() * (i+1));//Var for random letter [questionParse[i], questionParse[randLetters]] = [questionParse[randLetters], questionParse[i]]; } questionTxt.innerHTML = questionParse.join(" "); //displays for example : rarsleu

Aquí está el código que probé pero se muestra en la columna y, a veces, da un cuadro vacío:

 //Parse string to create array of chars, here string can be as an example surreal var questionParse = JSON.parse(currentQuestion.question); //Display letters in random order for (let i = questionParse.length; i >= 0; i--) { var anagrammeLetter = document.createElement('span'); anagrammeLetter.className = "box"; const randLetters = Math.floor(Math.random() * (i+1));//Var for a random letter [questionParse[i], questionParse[randLetters]] = [questionParse[randLetters], questionParse[i]]; anagrammeLetter.textContent = questionParse[i]; questionTxt.appendChild(anagrammeLetter); }

Este es el estilo que uso, pero si tienes un estilo que usa viento de cola, también es perfecto para mí Estilo:

 .box { width: 60px; height: 60px; border: 2px solid var(--empty); margin: 4px; color: black; text-transform: uppercase; display: grid; place-items: center; font-family: Arial, Helvetica, sans-serif; font-size: 2.4rem;

}

Alguien tiene alguna idea ? Gracias por adelantado