title: How to reason an implicit css grid area without all 4 edges named?
body: <p>Here is a situation I met and I didn't expect that the grid area will span the whole row track.</p>
  <p>As you can see, only <code>col-start</code> defined in the layout. How come the whole row track turned into an implicit grid area named as <code>col</code>?</p>
  <p>Here is the code.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;content&quot;&gt;content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
  }
  
  .content {
      grid-area: col;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/VkFmg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VkFmg.png" alt="enter image description here" /></a></p>
  <p><code>.content</code> div crosses all 12 column tracks.</p>