title: CSS Grid is being overwritten and I don't know why
body: <p>I am trying to create a 4 x 4 grid of 16 squares(divs). I have made the container div with a grid display. The 16 squares are in rows but when I try to make 4 columns it has a strikethrough in the styles tab of the dev tools.</p>
  <p>Here is what I have in my CSS:</p>
  <pre><code>html,body{
      height: 100%;
      margin: none;
  }
  
  #heading{
      height: 250px;
  }
  
  
  #wrapper{
      width: 600px;
      height: 600px;
      margin-left: auto;
      margin-right: auto;
  }
  
  #container{
      border: solid 1px;
      display: grid;
      grid-template-columns: 25%, 25%, 25%, 25%;
      height: 600px;
      width: auto;
  }
  
  .squares{
      border: solid 1px rgba(0, 0, 0, 0.3);
  }
  </code></pre>
  <p>They 16 child divs are created with JS. Would that have an impact on why grid is not working as expected?</p>
  <pre><code>let x = 0;
  
  do{
      const square = document.createElement(&quot;div&quot;);
  square.className = &quot;squares&quot;;
  square.setAttribute(&quot;id&quot;,&quot;block&quot;);
      document.getElementById(&quot;container&quot;).appendChild(square);
      x++;
  }
  while(x &lt; 16);
  </code></pre>