title: CSS grid auto-sizing not working when using span properties
body: <p>Say I have 3 blocks. Each block could have content spanning the full width of the website, or less. For example let's say block one has content that fills up the full width. The 2nd and 3rd blocks only have content that fill up less than a 1/3. How would I set up a grid that would: 1) respect the amount of content in the first block, and then allow the 2nd and third block to be side by side?</p>
  
  <p>This is the farthest I've gotten: <a href="https://codepen.io/anoblet/pen/VyyWzm" rel="nofollow noreferrer">codepen.io/anoblet/pen/VyyWzm</a> </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>#container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&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;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Watch how the columns wrap when needed. Now what I'm running into is that if I put a span 2 on any of the columns, it looks just like I would want it. Though when I resize it, it works at any number of columns except one column. When I resize it down to 1 column, something strange happens. See here: <a href="https://codepen.io/anoblet/pen/GyyEOv" rel="nofollow noreferrer">codepen.io/anoblet/pen/GyyEOv</a></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>#container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div style="grid-column: span 2"&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&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;</code></pre>
  </div>
  </div>
  </p>