无论网格中有多少单词，都要设置网格集大小

我有一个由3个字母组成的单词列表，这些单词可以动态生成网格。

问题是我需要一个6x6的网格，如果列表中没有足够的单词来实现6x6（12个单词），那么它就不是所需的大小，只能是一个和其中单词一样大的网格。

我如何使它始终生成一个6x6的网格，随机生成单词的位置，并用空单元格填充空白？

var listOfWords = {};
var ul = document.getElementById("wordlist");
var i;
for(i = 0; i < 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 < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
    var word = shuffledWords[j];
    guesses[word] = [];
    for (var k = 0; k < 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);

我已经试过了，但无法发挥作用。。。。

while(listOfWords.length < 12)
listOfWords.push("   ");