CODEWITHSUNDEEP
javascripthtmlcss
abedzantout
abedzantout

Reputation: 832

How can I make a 40x40 grid using divs?

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

Upvotes: 7

Views: 3090

Answers (7)

Houmam
Houmam

Reputation: 587

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);
}

Upvotes: 5

Tivie
Tivie

Reputation: 18923

You can use a mix of css, html and javascript.

IMHO, the best way is to take advantage of CSS classes and instead of creating each element individually in javascript, you can use cloneNode() to clone the first "box".

Here's an example (fiddle here) and snippet below

var parent = document.getElementById('parent'),
  box = parent.children[0];

for (var i = 0; i < 100; ++i) {
  var nBox = box.cloneNode(true);
  parent.appendChild(nBox);
}
.grid {
  width: 1000px;
  height: 1000px;
  background-color: green;
}
.box {
  float: left;
  width: 40px;
  height: 40px;
  background-color: red;
  border: 1px solid white;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
<div id="parent" class="grid">
  <div class="box">&nbsp;</div>
</div>

Upvotes: 2

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Here this will do it for you:

<body onload="makeGrid()" id="container">
<body>
<script>
  function makeGrid(){
    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);
        }

        //document.getElementById("container").appendChild(jump);
        //document.getElementById("container").appendChild(div);
    }
    }
</script>

CSS

#container{width: 1000px; height: 1000px;}
div{float: left;}

See example: http://jsfiddle.net/bun4g2d0/9/

Upvotes: 1

blurfus
blurfus

Reputation: 14031

Adding a bit of CSS and inline-block

Divs are typically block elements, you need to make them inline-blocks to help you with your grid.

If you want to remove the line gaps, play with margins (i.e. margin: 0; to reduce or margin: 0 1px; to add to the sides of each square) 

for (var i = 0; i < 40; i++) {
  var jump = document.createElement("br");

  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);
  }

  document.getElementById("container").appendChild(jump);
}
#container div {
  /* you need this */
  display: inline-block;

}

#container {
  width: 1000px;
  height: 1000px;
}
<div id="container">

</div>

Upvotes: 2

j08691
j08691

Reputation: 207891

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).

Upvotes: 4

Paul Carlton
Paul Carlton

Reputation: 2993

Here, this actually creates 40 divs in 40 parent divs (like rows):

for(var i = 0; i < 40; i++) {
    var div1 = document.createElement('div')
    for(var j = 0; j< 40; j++) {
        var div = document.createElement("div");
        div.style.width = "25px";
        div.style.height = "25px";
        div.style.background = "red";
        div.style.display = 'inline-block';
        div.style.margin = '1px'
        div1.appendChild(div)
    }
    document.getElementById('container').appendChild(div1);
}

http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info

Upvotes: 2

LcSalazar
LcSalazar

Reputation: 16821

First of all, you need to append the created div on each loop iteration.

Second, you need to set the divs as display: inline or display: inline-block

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);
        }
    }
#container {
  width: 1000px;
  height: 1000px;
}

#container > div {
  display: inline-block;
}
<div id="container"></div>

Upvotes: 4

Related Questions