How do I make a grid using divs?

newatthis 0
Viewed 46

Can anyone tell me what is wrong with my code? I am trying to create a grid using divs. This is what I have so far and I am not sure why it is not creating the grid. I have googled this so many times and I am at a loss for why it is not working. New to coding so any help would be greatly appreciated.

const container = document.querySelector('.container')

function makeGrid();
for (i = 0, i < 16, i++); {
  const row = document.createElement("div")
  container.document.body.appendChild(row);
  row.textContent = i;

  for (j = 0, j < 16, j++); {

    const col = document.getElementById('div');
    container.document.body.appendChild(col);

    col.textContent = j;
  }
  row.appendChild(col)
  container.appendChild(row)
  
}

makeGrid();
html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: repeat(3, auto);
}

.container {
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid blue;
  background-color: pink;
  display: inline-block;
  float: left;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Etch-a-Sketch TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>

  <div class="container"></div>
</body>

</html>

grid-layout grid javascript css html
2 Answers

Here is a simple working solution that you can use as a reference

 const container = document.querySelector(".container");

      function makeGrid() {
        for (i = 0; i < 16; i++) {
          for (j = 0; j < 16; j++) {
            const row = document.createElement("div");
            container.appendChild(row);
            row.textContent = `${i},${j}`
          }
        }
      }
      makeGrid();

      html,
      body {
        height: 100%;
        width: 100%;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        text-align: center;
      }
      .container div{
        width: 30px;
        height: 30px;
        border: 1px solid blue;
        background-color: pink;
      }

There are a couple of issues in your code with respect to syntax and logic.

  • for loops should have a semi-colon ; instead of comma ,
for (i = 0, i < 16, i++)

should be

for (i = 0; i < 16; i++)
  • for loops will not be executed if you add a semi-colon ; at the end
for (i = 0; i < 16; i++); {
   // repetitive code
}

will not work because of the semi-colon. To make it work, you will need to remove the ; like this

for (i = 0; i < 16; i++) {
   // repetitive code
}
  • It's not evident as to why you are fetching col, but the below method is incorrect.
const col = document.getElementById('div');

div is not an ID, it's an HTML tag. So you can replace the above statement with

const col = document.getElementsByTagsName('div');
  • CSS grid could be applied inside the .container instead of body, since your grid would be populated inside the .container , not body.
Aadesh0

the javascript function have you written was wrong. I have modified a few lines of your codes. Just try this out.!

const container = document.querySelector(".container");

  function makeGrid() {
    for (i = 0; i < 16; i++) {
      const row = document.createElement("div");
      row.className = "row";
      container.appendChild(row);
      row.textContent = i;

      for (j = 0; j < 16; j++) {
        const col = document.createElement("div");
        col.className = "col";
        row.appendChild(col);
        col.textContent = j;
      }
    }
  }

  makeGrid();
html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-columns: repeat(3, auto);
}

.container div {
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid blue;
  background-color: pink;
  display: inline-block;
  float: left;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Etch-a-Sketch TOP Project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>

  <div class="container"></div>
</body>

</html>

When you define a function ; not required. So it should be like this function makeGrid(){ ... }

Veeramani R0
Related