title: CSS grid row not moving?
body: <p>I am new to the grid but having issues with the 'grid-row' not working how it should? My 'content' div does not seem to span from where I set the row from and does not go all the way down. If I remove -1 and set it to the last row being 13 it still has a space underneath?!</p>
  
  <p>Also do I need to get a height per section? So does .header and .main need a fixed height?</p>
  
  <p>Here is a CodePen: <a href="https://codepen.io/anon/pen/Zdjvmd?editors=1100" rel="nofollow noreferrer">https://codepen.io/anon/pen/Zdjvmd?editors=1100</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    background-color: pink;
  }
  
  .main {
    background-color: pink;
    height: 250px;
  }
  
  
  .grid {
    min-width: 1280px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-row: repeat(12, 1fr);
    grid-gap: 1em;
  }
  
  .header-logo {
    background-color: hotpink;
    grid-column: 2 / 8;
  }
  
  .header-navigation {
    background-color: hotpink;
    grid-column: 8 / -1;
    grid-row: 2 / 13;
  }
  
  .sidebar{
    background-color: hotpink;
    grid-column: 2 / 4;
  }
  
  .content {
    background-color: red;
    grid-column: 4 / -1;
    grid-row: 4 / -1; /* &lt;-- This is my issue */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="header-logo"&gt;Logo&lt;/div&gt;
      &lt;div class="header-navigation"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;main class="main"&gt;
    &lt;section class="section"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="sidebar"&gt;
          Sidebar
        &lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;p&gt;Content here&lt;/p&gt;
          &lt;p&gt;Content here&lt;/p&gt;
          &lt;p&gt;Content here&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>