Stop overlapping for big words

In my spelling game, the grid is currently for three letter words. I can add big words to the "wordList" (which dynamically creates a grid), but the grid size changes and overlaps in lines where there are more words.

At the moment when a four-letter word is added, the grid will add an additional cell to the end of this line, but does not judge that the word does not fit on this line and takes a different position in the grid that works.

Basically, I need a grid so that it stays the same size, and when words are randomly placed, determine a position that allows the grid to remain 6x6, and not go out of the edges when they don't fit into the position. Obviously, adding words larger than 6 letters will not work, because it is 6x6, but this should not be a problem, because I do not think that we will stretch into big words.

Words are added via html like this ...

<ul style="display:none;" id="wordlist">
    <li data-word="rat" 
        data-audio="http://www.wav-sounds.com/cartoon/bugsbunny1.wav" 
        data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png">
    </li>
</ul>

Then the grid is dynamically created from a list like this ...

var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;

for (i = 0; i < ul.children.length; ++i) {

    listOfWords.push({
        "name": ul.children[i].getAttribute("data-word"),
        "pic": ul.children[i].getAttribute("data-pic"),
        "audio": ul.children[i].getAttribute("data-audio")
     });
}

var chosenWords = [];
var copylist = listOfWords.slice();

for (var x = 0; x < ul.children.length; x++) {
    var rand = Math.floor(Math.random() * (copylist.length));
    chosenWords.push(copylist[rand].name);
    copylist.splice(rand, 1);
    if (chosenWords.length < 12) {
        chosenWords.push('   ');
    }

}

var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
    return 0.5 - Math.random()
});

var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i < 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-box').attr('data-word', word).attr('data-letter', word[k]);
            cell.textContent = word[k];

            row.appendChild(cell);
         }
    }

    tbl.appendChild(row);
}

$(".container").append(tbl);

Here is a fiddle to show exactly what I mean. I added two 4-letter words to "wordList" to show what I mean. http://jsfiddle.net/cTGGA/18/

EDIT

As soon as I adapted the big words into the grid, what will I say in this statement in order to prepare it.

var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');