title: Why these 2 pieces of code give different results (grid-row)?
body: <p>I am trying to understand how does CSS grid work and I don't understand why the following codes produces different results:</p>
  <pre class="lang-css prettyprint-override"><code>.item20 {
      grid-row-start: 4;
      grid-row: span 3;
  }
  </code></pre>
  <p>And the next one I think is the shorthand:</p>
  <pre class="lang-css prettyprint-override"><code>.item20 {
      grid-row: 4 / span 3;
  }
  </code></pre>
  <p>I want to have this item starting at row 4 and have a height of 3 rows, but the result is different when I choose first code.</p>
  <p>First Code:</p>
  <p><img src="https://i.stack.imgur.com/0jqGR.png" alt="First Code" /></p>
  <p>Second Code:</p>
  <p><img src="https://i.stack.imgur.com/t6fBW.png" alt="Second Code" /></p>