title: Wrong end line number in CSS grid layout
body: <p>I am learning CSS grids. So far I love it. But I am facing an issue with the line number.
  I have defined my <code>inline-grid</code> by this:</p>
  <pre><code>grid-template-columns: repeat(7, 60px);
  grid-template-rows: repeat(4, 60px);
  </code></pre>
  <p>=&gt; There are 7 columns, so the final line number should be <code>8</code>. But it's showing <code>10</code>.</p>
  <p>=&gt; There are 4 rows, so the final row line number should be <code>5</code>. It's showing <code>7</code></p>
  <p>(In <code>-ve</code> numbers, it showing correctly for both rows &amp; columns, <code>-1/-8</code> &amp; <code>-1/-5</code> respectively)</p>
  <p>Trying to fix this since yesterday evening. Please help me</p>
  <p>Firefox:<br>
  <a href="https://i.stack.imgur.com/mHkZb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mHkZb.png" alt="chrome dev tool screenshot" /></a></p>
  <p>Chrome:<br>
  <a href="https://i.stack.imgur.com/Mugtt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mugtt.png" alt="firefox dev tool screenshot" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      margin: 110px 270px;
      display: inline-grid;
      grid-template-columns: repeat(7, 60px);
      grid-template-rows: repeat(4, 60px);
      background-color: violet;
  
      grid-template-areas: "header header header header header header header";
  }
  
  .header {
      grid-area: header;
      background-color: brown;
  }
  
  .main {
      grid-area: main;
  }
  
  .sidebar {
      grid-area: sidebar;
  }
  
  .footer {
      grid-area: footer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="header"&gt;&lt;/div&gt;
          &lt;div class="main"&gt;&lt;/div&gt;
          &lt;div class="sidebar"&gt;&lt;/div&gt;
          &lt;div class="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>