title: CSS grid items exiting grid with <input>s but acts correctly with <div>s
body: <p>I am working on a project where I have to render a dynamic table. Dynamic in both the number of rows
  and number of columns. I am using CSS grid for the table. My problem is best demonstrated with this code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function add(type){
    var tmp = document.createElement(type)
    tmp.innerHTML='tmp'
   document.getElementById('place').insertAdjacentElement('afterend', tmp)
  }
  
  function addInput(){
    add('input')
  }
  
  function addDiv(){
    add('div')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> :root {
     --rowNum: 2;
     --colNum: 3;
   }
   
   .container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto 40px;
   }
  
  .table {
       grid-template-columns: 100px repeat(var(--colNum), auto);
       grid-template-rows: repeat(var(--rowNum), 50px);
       grid-column: 1;
       display: grid;
   }
   
   .empty {
       grid-column: 2;
       grid-row-start: 1;
       grid-row-end: 2;
       grid-template-columns: 1;
       display: grid;
   }
  
  
   * { background-color: rgba(255, 0, 0, 0.2); }
   * * { background-color: rgba(0, 255, 0, 0.2); }
   * * * { background-color: rgba(0, 0, 255, 0.2); }
   * * * * { background-color: rgba(255, 0, 255, 0.2); }
   * * * * * { background-color: rgba(0, 255, 255, 0.2); }
   * * * * * * { background-color: rgba(255, 255, 0, 0.2); }
   * * * * * * * { background-color: rgba(255, 0, 0, 0.2); }
   * * * * * * * * { background-color: rgba(0, 255, 0, 0.2); }
   * * * * * * * * * { background-color: rgba(0, 0, 255, 0.2); }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="table" id='table'&gt;
      &lt;div&gt;
        1
      &lt;/div&gt;
      &lt;div&gt;
        2
      &lt;/div&gt;
      &lt;div id='place'&gt;
        3
      &lt;/div&gt;
      &lt;div&gt;
        4
      &lt;/div&gt;
      &lt;div&gt;
        5
      &lt;/div&gt;
      &lt;div&gt;
        6
      &lt;/div&gt;
      &lt;div&gt;
        7
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="empty"&gt;
      empty
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button onclick="addDiv()"&gt;
    addDiv
  &lt;/button&gt;
  
  &lt;button onclick="addInput()"&gt;
    addInput
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please run the snippet and keep clicking on the <code>addDiv</code> button. Things work as expected, new cells are added and they wrap to the next row. Now please click on <code>addInput</code> three to four times; as you can see, when adding <code>input</code> siblings, the grid flows into the neighboring column on the parent container. </p>
  
  <p>My questions are why this is happening? am I misusing something or is this a bug? Also how do get the behavior with a <code>div</code> while using an <code>input</code>? (wrapping in <code>div</code> doesn't work)</p>