title: Using grid-column-start causes auto-placement of grid items to stop working
body: <p>In the below example, main should be getting pushed to the 2nd line when the screen size is decreased, but for some reason it stays in the first row even though the footer starts at column 3 and there's plenty of room for main to move down.</p>
  
  <p>If I remove the grid-column-start/end from the footer, the grid is fully responsive and pushes main to the 2nd row when re-sized.</p>
  
  <p>My thought was "maybe when positioning is involved, the items are 'popped' out of their normal grid-flow and are in their own little 'dimension' so-to-speak". However, when I add positioning to <code>main { grid-column-start: 4 }</code>, it doesn't 'pop' out of it's position and get pushed into the 'dimension of positioned grid items only'. It simply just stays on row 1 and moves to the right.</p>
  
  <p>I apologize if the dimension stuff doesn't make sense but I just wanted to share what I thought was going on.</p>
  
  <p>Example:</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-css lang-css prettyprint-override"><code>body {
    height: 100vh;
    margin: 0; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  footer {
    grid-column-start: 3;
    grid-column-end: 4;
  }
  
  header {
    background: tomato;
    border: 2px solid red;
  }
  
  main {
    background: yellow;
    border: 2px solid gold;
  }
  
  nav {
    background: limegreen;
    border: 2px solid green;
  }
  
  footer {
    background: dodgerblue;
    border: 2px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;Header&lt;/header&gt;
    &lt;nav&gt;Nav&lt;/nav&gt;
    &lt;main&gt;Main&lt;/main&gt;
    &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>