16 x 16 grid does not display correctly-CodePudding

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 >
        <span ></span>
    </div>
    <div id="message"></div>
</body>

</html>

CodePudding user response：

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 >
    <span ></span>
  </div>
  <div id="message"></div>
</body>

</html>

CodePudding user response：

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 >
      <div  id="c" ></div>
    </div>
    <div id="message"></div>
</body>