title: Filling CSS grid with JavaScript
body: <p>I am working on a personal project with a <code>canvas</code> that is a CSS grid. It is 17 rows and columns and instead of adding 289 <code>div</code>s manually, that I would create a for loop to do it for me when the page loads.  </p>
  
  <p>JavaScript:  </p>
  
  <pre><code>var row = 1;
  var column = 1;
  
  function init() {
    for (var i = 0; i &lt; 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");
    }
  }
  </code></pre>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;body onLoad="init();"&gt;
    &lt;canvas id="myCanvas" width="600" height="600"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the only 'version' that I've tried that doesn't spit an error at me, but still nothing shows up. It runs though, because the console displays <code>"test"</code>. </p>
  
  <p>I've tried replacing:</p>
  
  <pre><code>var div = document.createElement("div");
  </code></pre>
  
  <p>with  </p>
  
  <pre><code>var div = document.canvas.createElement("div");`,  
  var div = document.myCanvas.createElement("div");
  </code></pre>
  
  <p>...etc. (which probably aren't the right syntax but I tried them anyway) and it gives me this error when evaluating  <code>document.myCanvas.createElement</code>:</p>
  
  <pre><code>TypeError: undefined is not an object
  </code></pre>
  
  <p>Basically I just want each grid box in the <code>canvas</code> to be filled using JS when the page loads. Also, I'm very new to programming so simple terms are much appreciated. Thank you in advance.</p>