title: CSS grid grid-column span issue
body: <p>I am working on the span size of a grid-column.</p>
  <p>I have this code for my grid-columns:</p>
  <pre><code>.main_comp:nth-child(n+3) {
    //background-color: yellow;
    grid-template-columns: repeat(6, 1fr);
  }
  
  .main_comp:nth-child(n+3) .bigimg {
    grid-row: 1;
    grid-column: auto / span 3;
  }
  
  .main_comp:nth-childn+(n+3) .blog_art {
    grid-row: 2;
    grid-column: auto / span 2;
    background-color: green;
  }
  </code></pre>
  <p>The result I am getting is not quite what I want. I thought that:</p>
  <pre><code>grid-column: auto / span 2;
  </code></pre>
  <p>would span each blogart div 2 columns and three of blogart divs would span over all the 6 columns.</p>
  <p><a href="https://i.stack.imgur.com/xlJIp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xlJIp.png" alt="enter image description here" /></a></p>
  <p>What I would like is something like this for all the divs from number three and onwards:</p>
  <p><a href="https://i.stack.imgur.com/etyzl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/etyzl.png" alt="enter image description here" /></a></p>
  <p>I have setup a codepen on <a href="http://codepen.io/lupis/pen/jmWPwR?editors=1100#0" rel="nofollow noreferrer">my example</a> and the issue I have mentioned here starts on line 66.</p>