How can I build a 3 x 3 tile based CSS grid with sidebar at full viewport height using grid-template-areas?

Your grid-template-areas are defined incorrectly. Think of it as drawing a rough table / grid while telling css which cells of rows and columns act in which way on output.

Changing the grid-template-areas to following will work:

grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}

The full code becomes this:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
display: grid;
grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
grid-template-rows: auto; height: 100vh;
}

.one {
  grid-area: one;
  border: 1px solid;
}

.three {
grid-area: three;
  border: 1px solid;
}

.two {
grid-area: two;
  border: 1px solid;
}

<div class="parent">
    <div class="one">one</div>
    <div class="three">three</div>
    <div class="two">two</div>
</div>

Your desired layout is a 3 x 3 tiles based grid layout at full viewport height.

In order to implement that, you have to fix the grid container element .parent grid-template-areas accordingly.

Additionally, set height of .parent to 100% of that of the viewport with the viewport-percentage lengths unit vh:

.parent {
  display: grid;
  height: 100vh;
  grid-template-areas: 
  "one one three"
  "one one three"
  "two two three";
}