grid in javascript

1const container = document.getElementById("container");
2
3function makeRows(rows, cols) {
4  container.style.setProperty('--grid-rows', rows);
5  container.style.setProperty('--grid-cols', cols);
6  for (c = 0; c < (rows * cols); c++) {
7    let cell = document.createElement("div");
8    cell.innerText = (c + 1);
9    container.appendChild(cell).className = "grid-item";
10  };
11};
12
13makeRows(16, 16);
14
15
16:root {
17  --grid-cols: 1;
18  --grid-rows: 1;
19}
20
21#container {
22  display: grid;
23  grid-gap: 1em;
24  grid-template-rows: repeat(var(--grid-rows), 1fr);
25  grid-template-columns: repeat(var(--grid-cols), 1fr);
26}
27
28.grid-item {
29  padding: 1em;
30  border: 1px solid #ddd;
31  text-align: center;
32}
33
34
35<div id="container">
36</div>