Display each element of array in grid box one row JS-CodePudding

I wish to display each char of my array into a box in only one row (see image below) using javascript.

When I use grid it displays only in one column and also sometimes my box is empty.

Here is my following code working, but only display chars without 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 : r a r s l e u

Here is the code I tried but displays in column and sometimes give empty box :

        //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);
        }

This is the style I use, but if you have a style using tailwind then it's perfect for me as well Style :

.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;

}

Does anyone have any idea ? Thanks in advance

CodePudding user response：

display: grid; should be on the parent node of the letters.

.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

.letter {
  border: 1px solid black;
  text-align: center;
  text-transform: uppercase;
}

<div >
  <div >s</div>
  <div >u</div>
  <div >r</div>
  <div >r</div>
  <div >e</div>
  <div >a</div>
  <div >l</div>
</div>

CodePudding user response：

The Flexbox model will also work.

// Have a container for your letters
const letters = document.querySelector('.letters');

// Your string
const str = 'surreal';

// Temporary array
const html = [];

// Iterate over the string and push new
// letter elements into the array
for (const letter of str) {
  html.push(`<div >${letter}</div>`);
}

// Add the joined up array of strings
// as the HTML of your container
letters.innerHTML = html.join('');

.letters { display: flex; width 60%; justify-content: center; align-items: center; }
.letter { font-size: 1.2em; padding: 0.2em 0.5em; border: 1px solid #565656; border-radius: 5px; text-transform: uppercase;}
.letter:not(:last-child) { margin-right: 0.2em; }

<div ></div>