title: grid cell gets pushed down to the next row
body: <p>So I just started trying out the grid display, but for some reason with this basic of a code.</p>
  <pre><code>    div{
          padding: 50px;
          margin: 10px;
          border: 5px solid black;
      }
      
      .grid{
          display: grid;
          grid-template-columns: auto auto auto;
      }
      
      .grid-header{grid-column: 1 / span 3;}
      
      .grid-main{grid-column: 1 / span 2;}
  </code></pre>
  <p>I keep getting this as a result though.</p>
  <p><a href="https://i.stack.imgur.com/pfSRN.png" rel="nofollow noreferrer">Result</a></p>
  <p>but what I want is for it to look like this</p>
  <p><a href="https://i.stack.imgur.com/q2C5Y.png" rel="nofollow noreferrer">Intended</a></p>
  <p>Here's the full code if it helps.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;style&gt;
      div {
        padding: 50px;
        margin: 10px;
        border: 5px solid black;
      }
      
      .grid {
        display: grid;
        grid-template-columns: auto auto auto;
      }
      
      .grid-header {
        grid-column: 1 / span 3;
      }
      
      .grid-main {
        grid-column: 1 / span 2;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="grid"&gt;
      &lt;div class="grid-header"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div class="grid-main"&gt;&lt;/div&gt;
      &lt;div class="grid-main"&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>