用JavaScript填充CSS网格

我正在做一个个人项目，它有一个

画布

，这是一个CSS网格。它有17行和17列，而不是手动添加289

div

s，我将创建一个for循环，以便在页面加载时为我执行此操作

JavaScript:

var row = 1;
var column = 1;

function init() {
  for (var i = 0; i < 289; i++) {
    var div = document.createElement("div");
    div.style.color = "gray";
    div.style.gridRow = row;
    div.style.gridColumn = column;
    column += 1;
    if (column == 17) {
      row += 1;
      column = 0;
    }
    console.log("test");
  }
}

与

var div = document.canvas.createElement("div");`,  
var div = document.myCanvas.createElement("div");

……等等。（这可能不是正确的语法，但我还是尝试了它们），它在计算

document.myCanvas.createElement

时给了我这个错误：

TypeError: undefined is not an object

---

基本上，我只想在页面加载时使用JS填充

画布中的每个网格框。另外，我对编程非常陌生，所以非常感谢简单的术语。提前谢谢。
我最终创建了一个
div
，其中包含
画布
，并替换了：

var div = document.createElement("div");

var div = document.createElement("div");

与：

它工作得很好。
我没有在
画布上做太多工作，但是我非常确定你应该在
画布上画
，而不是试图
创建一个新的元素，这个元素在
if（column==17）{row+=1；column=0；}中似乎没有
append
column=0
可能应该是
column=1
var div = document.createElement("div");

var newDiv = document.createElement("div"); 
document.getElementById("background").appendChild(newDiv);