Creating a 16x16 grid using JavaScript
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;
}
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 i=0, n=16;
container.innerHTML =
`<div class="row">${'<div class="cell">X</div>'.repeat(n)}</div>`
.repeat(n).replace(/X/g,_=> (i++).toString(n) )
.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>