CSS grid columns not spanning full vertical height

Question

This is probably a silly question, but I have attempted to recreate a grid with 2 columns, aside on the left and main on the right and the standard one column view on tablet.

However, I am not sure how to properly force the columns in desktop and tablet to be full 100% height. I dont want to use viewport heights.

I am trying to keep the css specifically to the grid way. not sure on the correct way of implementing it though, but I think I am nearly there... Using css grid for the structure and flexbox for the internals would be what I am aiming for.

/* grid */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* body, html {min-height: 100%; height: 100%} */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
}


/* items */

.grid>* {
  color: #353535;
  font-size: 1.2em;
  line-height: 1.5;
  padding: 0 15px;
  background: #d0cfc5;
}

header {
  padding: 0;
  margin: 0;
}


/* nav styles */

.grid nav {
  background: #136fd2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: #d0cfc5;
}

nav a:hover {
  text-decoration: none;
}


/* media query for grid layout */

@media only screen and (min-width: 992px) {
  /* grid */
  .grid {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "aside main";
    grid-template-rows: repeat(1, 1fr);
    max-width: 1000px;
    margin: 0 auto;
  }
  /* specific item styles */
  .grid aside {
    grid-area: aside;
  }
  .grid main {
    grid-area: main;
  }
  header {
    display: none;
  }
  /* nav styles */
  nav ul {
    background: #d0cfc5;
  }
  nav ul li {
    display: block;
    padding: 0 20px 0 0;
  }
  nav li a {
    color: red;
    text-decoration: none;
  }
}

<div class="grid">
  <header role="banner">
    <h1>Yoko</h1>
  </header>
  <div class="overlay"></div>
  <aside>
    <h3>Aside</h3>
    <nav>
      <ul>
        <li>
          <a href="#">Item 1</a>
        </li>
        <li>
          <a href="#">Item 2</a>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
      </ul>
    </nav>
  </aside>

  <main>
    <div>
      <h2>Article</h2>
      <p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh.</p>
      <p>Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>

      <p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
    </div>
  </main>
</div>

Answer 1

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding:0;
  margin:0;
}

.grid {
  display: grid;
  grid-template-areas:
    'aside header header header '
    'aside main main main  ';
}
.grid > header{
 grid-area: header;
 background-color: red;
 padding: 10px;
}

.grid > aside{ 
 grid-area: aside;
  background-color: yellow;
   padding: 10px;
 
}
.grid > main { 
 grid-area: main;
 padding: 10px;
}



.grid nav {
  background: #136fd2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: #d0cfc5;
}

nav a:hover {
  text-decoration: none;
}

@media only screen and (min-width: 992px) {

  nav ul {
    background: #d0cfc5;
  }
  nav ul li {
    display: block;
    padding: 0 20px 0 0;
  }
  nav li a {
    color: red;
    text-decoration: none;
  }
}

<div class="grid">
  <header role="banner">
    <h1>Yoko</h1>
  </header>
  <div class="overlay"></div>
  <aside>
    <h3>Aside</h3>
    <nav>
      <ul>
        <li>
          <a href="#">Item 1</a>
        </li>
        <li>
          <a href="#">Item 2</a>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
      </ul>
    </nav>
  </aside>

  <main>
    <div>
      <h2>Article</h2>
      <p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh.</p>
      <p>Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>

      <p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
    </div>
  </main>
</div>

Answer 2

In your case a good solution is add grid-template-rows: 100vh instead grid-template-rows: repeat(1, 1fr); because you should set up height of one cell in grid.

@media only screen and (min-width: 992px) {
  /* grid */
  .grid {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "aside main";
    grid-template-rows: 100vh;
    max-width: 1000px;
    margin: 0 auto;
  }

Of course you could set height: 100vh for child element, but you have mentioned you are not going to do it. What about it? Does it solve the problem?