Putting random spaces in a dynamic grid
<p>I have a list of 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. </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 = ["mat", "cat", "dog", "pit", "pot", "fog"];
var shuffledWords = listOfWords.slice(0).sort(function() {
    return 0.5 - Math.random();
}).slice(0, 6);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i &lt; shuffledWords.length; i += wordsPerRow) {
    var row = document.createElement('tr');
    for (var j = i; j &lt; i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        for (var k = 0; k &lt; word.length; k++) {
            var cell = document.createElement('td');
            cell.textContent = word[k];
            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}
document.body.appendChild(tbl);
</code></pre>
