Creating A 16x16 Grid Using JavaScript

Answer :

It would be much cleaner to use CSS variables and CSS grid to create dynamic rows and columns.

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

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.innerText = (c + 1);
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}

<div id="container">
</div>

Try

let n=16, i=-1, j=0, s='';

while(++i<n) {
  s+= '<div class="row">'
  for(j=0; j<n; j++) s+= `<div class="cell"> ${(i*n+j).toString(16)} </div>`;
  s+= '</div>'
}

container.innerHTML = s;

.row { display: flex; font-size: 9.5px; text-align: center; color: red }
.cell { width: 10px; height: 10px; margin: 1px; border: 1px solid black;}

<div id="container"></div>

The solution, as provided by Gerardo Furtado is to change the CSS.

Old CSS:

.gridRow {
    border: 1px solid black;
}

.cell {
    border: 1px solid black;
}

Fixed CSS:

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 20px;
  display: inline-block;
}