Making grid set size no matter how many words are in it
<p>I have a list of 3 letter words that dynamically generate a grid. </p>

<p>The problem is I need a 6x6 grid, and if there is not enough words in the list to facilitate a 6x6 (12 words) then it won't be the size needed, and only be a grid as big as the words in it. </p>

<p>How can I make it so it always produces a 6x6 grid, randomly generates positions for the words and fills the gaps with empty cells?</p>

<pre><code>var listOfWords = {};

var ul = document.getElementById("wordlist");

var i;
for(i = 0; i &lt; ul.children.length; ++i){
listOfWords[ul.children[i].getAttribute("data-word")] = {
     "pic" : ul.children[i].getAttribute("data-pic"),
     "audio" : ul.children[i].getAttribute("data-audio")
};
}

 console.log(listOfWords);
 var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
 return 0.5 - Math.random();
 }).slice(0, 12);
 var guesses = {}
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i &lt; Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
var row = document.createElement('tr');

for (var j = i; j &lt; i + wordsPerRow; ++j) {
    var word = shuffledWords[j];
    guesses[word] = [];

    for (var k = 0; k &lt; word.length; ++k) {
        var cell = document.createElement('td');


        $(cell).addClass('drop').attr('data-word', word);
        cell.textContent = word[k];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
    }
}
tbl.appendChild(row);
}

document.body.appendChild(tbl);
</code></pre>

<p>I have tried this, but cannot get it to work....</p>

<pre><code>while(listOfWords.length &lt; 12)
listOfWords.push("   ");
</code></pre>
