How can I make a 40x40 grid using divs?

Question

I am basically trying to create using javascript a 40x40 red grid of divs in my html document.

Here's my loop:

for(var i = 0; i < 40; i++) {
        for(var j = 0; j< 40; j++) {
            var div = document.createElement("div");
            div.style.width = "25px";
            div.style.height = "25px";
            div.style.background = "red";
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }

The problem is I can't seem to get it to form a square of all the divs I created. The container is 1000 x 1000 px. Thank you

Answer 1

All you need is to put the last 3 lines inside the inner loop (not inside the outer loop):

for(var i = 0; i < 40; i++) {
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";

        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
        document.getElementById("container").appendChild(div);
    }
}

Also, don't forget to set the 'display' to 'inline-block':

div.style.display = "inline-block";

Or, you have to use the 'float' attribute:

div.style.float = "left";

EDIT:

Use row-div to group each 40 cells in a row:

for(var i = 0; i < 40; i++) {
    var row = document.createElement("div");
    for(var j = 0; j< 40; j++) {
        var cell = document.createElement("div");
        cell.style.width = "25px";
        cell.style.height = "25px";
        cell.style.background = "red";
        cell.style.display = "inline-block"

        row.appendChild(cell);
    }
    document.getElementById("container").appendChild(row);
}

Answer 2

I believe what you want is the following:

for (var i = 0; i < 40; i++) {
    for (var j = 0; j < 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        document.getElementById("container").appendChild(div);
    }
    var jump = document.createElement("br");
    document.getElementById("container").appendChild(jump);
}

#container {
    width:1000px;
    height:1000px;
}
#container div {
    display:inline-block;
    vertical-align:top;
}

<div id="container"></div>

Your inner divs can be inline-block elements so that they flow next to each other (since divs by default are block level). You also need to insert a line break after each inner (j) loop. So the process would be: generate 40 inline divs, insert a line break, generate 40 inline divs, insert a line break,...(repeat 38 more times).