CSS grid row not moving?

Question

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?!

Also do I need to get a height per section? So does .header and .main need a fixed height?

Here is a CodePen: https://codepen.io/anon/pen/Zdjvmd?editors=1100

.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; /* <-- This is my issue */
}

<header class="header">
  <div class="grid">
    <div class="header-logo">Logo</div>
    <div class="header-navigation">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
</header>

<main class="main">
  <section class="section">
    <div class="grid">
      <div class="sidebar">
        Sidebar
      </div>
      <div class="content">
        <p>Content here</p>
        <p>Content here</p>
        <p>Content here</p>
      </div>
    </div>
  </section>
</main>

Answer 1

I think you're having issues possibly because you're using two separate grids, e.g. they are not aware of each other. Not sure if the following is useful in your scenario, but I personally like to use the grid-template-areas property much better than trying to control the grid with grid-column or grid-row, like that it's easy to have kind of an overview of the layout of the grid. It might seem to be a bit repetitive but the grid-template-areas property requires you to specify each column (you can have empty cells by using a . instead of the area name!), so as we have 12 columns here it's a bit more typing =)... on the other hand, as you might notice: The required markup is much cleaner and the css as well.

.grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
	"l l n n n n n n n n n n"
	"s s s s m m m m m m m m";
}

.main.grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
	"ml ml mr mr mr mr"
	"mb mb mb mb mb mb";
}

.header-logo {
  background-color: pink;
  grid-area: l;
}

.header-navigation {
  background-color: coral;
  grid-area: n;
}

.header-navigation-list {
  background: tomato;
  display: flex;
  list-style: none;
  padding: 0; margin: 0;
}
  .header-navigation-list a {
    padding: 0 0.5em 0 0.5em;
  }

.sidebar {
  background-color: hotpink;
  grid-area: s;
}

.main {
  background-color: red;
  grid-area: m;
}
.main-right {
  background: teal;
  grid-area: mr;
}
.main-left {
  background: lightseagreen;
  grid-area: ml;
}
.main-bottom {
  background: gold;
  grid-area: mb;
}

<div class="grid">
  <div class="header-logo">Logo</div>
  <nav class="header-navigation">
    <ul class="header-navigation-list">
      <li><a href="">Home</a></li>
      <li><a href="">Products</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>

  <aside class="sidebar">
    Sidebar
  </aside>

  <main class="main grid">
    <div class="main-left">
      <p>Content left here</p>
    </div>
    <div class="main-right">
      <p>Content right here</p>
    </div>
    <div class="main-bottom">
      <p>Content bottom here</p>
    </div>
  </main>
<div>

EDIT: Adapted the example to show nested grid and removed max-width width-control addition as it caused confusion =)