16 x 16 grid does not display correctly

Question

beginner here.

Since days I try to build an etch-a-sketch board with 32 boxes, 16 columns and 16 rows. The only thing I end up with is 32 boxes in a row or in a column. I don't know where the error is, in the script, css or the html so I included all three in the post.

Any help is appreciated!

Here is the code:

document.addEventListener('DOMContentLoaded', () => {

    const grid = document.querySelector('.grid');
    //const message = document.querySelector('#message');

    //MAKE THE BOARD
    function makeBoard() {
        for (let i = 0; i <= 16; i++ ) {
            const squareCol = document.createElement('div');
            squareCol.className = 'squareCol';
            squareCol.setAttribute('data-id',i)
            grid.appendChild(squareCol);
           
        }for(let j = 0; j <= 16; j++){
            const squareRow = document.createElement('div');
            squareRow.className = 'squareRow';
            squareRow.setAttribute('data-id',j)
            grid.appendChild(squareRow);
        }
    }

    makeBoard();
})

body {
    margin: 0;
    padding: 0;
}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 618px;
    width: 618px;
}

.grid {
    display: flex;
    justify-content: center;
    align-items: center;


}

.squareRow, .squareCol {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10px;
    width: 10px;
    border: solid black 1px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-a-Sketch</title>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="container">
        <span class="grid"></span>
    </div>
    <div id="message"></div>
</body>

</html>

You need to specify a wrap strategy in your CSS. Does this answer your question? [Flexbox: 4 items per row](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) — isherwood, Dec 21 '21 at 22:09
Why are you appending cells as rows and cells as columns to the grid. Shouldn't the columns be in the rows? You add 16 divs to the grid with squareCol followed by 16 divs with the class squareRow. It should be `for (i) { make row for (j) { make cols, append to row } }` — epascarello, Dec 21 '21 at 22:12
@isherwood, you are right, and thank you, I need a better understanding of flexbox, gotta check out the link and look at the fundamentals again. — Karl, Dec 22 '21 at 09:11
Welcome to SO. Please take the [tour] so you know how to use this site. — isherwood, Dec 22 '21 at 13:38

score 0 · Answer 1 · answered Dec 21 '21 at 22:13

Primarily you need to wrap the grid columns. See the additional CSS I've applied to the container and items inside.

As epascarello points out, all flex children should be columns. The container is the row. Either that or you have to restructure your script to actually create multiple flex rows, with individual containers.

document.addEventListener('DOMContentLoaded', () => {

  const grid = document.querySelector('.grid');
  //const message = document.querySelector('#message');

  //MAKE THE BOARD
  function makeBoard() {
    for (let i = 0; i <= 16; i++) {
      const squareCol = document.createElement('div');
      squareCol.className = 'squareCol';
      squareCol.setAttribute('data-id', i)
      grid.appendChild(squareCol);

    }
    for (let j = 0; j <= 16; j++) {
      const squareRow = document.createElement('div');
      squareRow.className = 'squareRow';
      squareRow.setAttribute('data-id', j)
      grid.appendChild(squareRow);
    }
  }

  makeBoard();
})

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 618px;
  width: 618px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.squareRow,
.squareCol {
  display: flex;
  flex: 1 1 6.25%;
  justify-content: center;
  align-items: center;
  height: 10px;
  border: solid black 1px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch-a-Sketch</title>
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <span class="grid"></span>
  </div>
  <div id="message"></div>
</body>

</html>

score 0 · Answer 2 · answered Dec 21 '21 at 22:24

I put a div (.parent) container inside your wrapped container. the parent class containes the grid template.

const grid = document.getElementById('c');

for (let i = 0; i < 32; i++) {
  const squareCol = document.createElement('div');
  squareCol.className = 'squareCol';
  squareCol.setAttribute('data-id',i)
  squareCol.innerHTML = (i + 1)
  grid.appendChild(squareCol);  
}

body {
    margin: 0;
    padding: 0;
}

.parent {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 618px;
    width: 618px;
}

.squareCol {    

}

.squareRow, .squareCol {    
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    border: solid black 1px;
}

 <body>
    <div class="container">
      <div  id="c" class="parent"></div>
    </div>
    <div id="message"></div>
</body>

16 x 16 grid does not display correctly

2 Answers2