title: grid-column doesn't work?
body: <p>I have this markup</p>
  
  <pre><code>&lt;main&gt;
  &lt;section class="download"&gt;
    &lt;img src="media/icon.svg" alt="TOX chat icon" width="345" height="280"&gt;
    &lt;div class="download_desc"&gt;
      &lt;h1&gt;A New Kind of Instant Messaging&lt;/h1&gt;
      &lt;p&gt;
        Whether it's corporations or governments, digital surveillance today is widespread. Tox is easy-to-use software that connects
        you with friends and family without anyone else listening in. While other big-name services require you to pay
        for features, Tox is completely free and comes without advertising — forever.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and CSS applied:</p>
  
  <pre><code>    main {
    display: grid;
    grid-template-rows: 750px 500px 815px 815px 180px;
    grid-template-columns: repeat(6, 1fr);
  }
  
  .download {
    background-color: #414141;
    color: white;
  }
  
  .download_desc {
    grid-column: 2/6;
  }
  </code></pre>
  
  <p>For some reason, grid-column at this case doesn't work at all.
  <code>div</code> with <code>download_desc</code> class is still in the first column, not from 2nd to 6th as I wanted.</p>
  
  <p>It works if i apply it directly to the <code>.download</code> class, but not it's children.</p>
  
  <p>Why?</p>