16x16 grid problem with new line

I am trying to create a 16x16 grid but I can’t pass to new line after every 16 squares.
Code: https://codepen.io/krykck/pen/vYOOGdr

You’re putting the <br> element inside the last square of each row, you’re just rendering a set of divs for each row, and one of those divs has a br element inside it.

Edit:

for (let i = 0; i < 16; i++) {
  for (let j=0;j<16;j++){
    let square = document.createElement('div');
    square.className = 'square';
    document.body.appendChild(square);
  }
  let br = document.createElement('br');
  document.body.appendChild(br);
}

Edit: alternative as something to think about, using grid and providing a function to render a grid to an heml element with a height/width (in squares) and a size for each square – https://codepen.io/DanielCouper/pen/VwLLjwE

1 Like

Thanks for showing another way!