grid-template-areas and grid-area question

Question

I've setup a simple CSS grid as follows using grid-area and grid-template-areas (codepen here: https://codepen.io/Chiz/pen/yLvEboj) :

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

.container
{
  display:grid;
  grid-template-columns:100px 100px 100px 100px 100px;
  grid-template-areas:
    "firstbox firstbox firstbox firstbox firstbox"
    "middlebox middlebox middlebox middlebox middlebox" 
    "lastbox lastbox lastbox lastbox lastbox ";
}

.container div
{
  border:1px solid red;
}

.box1
{
  grid-area:firstbox;
}
.box2
{
  grid-area: middlebox;
}
.box3
{
  grid-area:lastbox;
}

Now, if I edit this line:

"middlebox middlebox middlebox middlebox middlebox"

to become

"firstbox middlebox middlebox middlebox middlebox"

The result looks messed up. Since firstbox and middlebox are the same in width etc (just with different names), shouldn't it work too?

In this article : https://blog.duda.co/how-to-use-css-grid-template-area , the author also uses stuff like below where he mixes different grid-area names into the grid-template-areas property and it works for him:

 grid-template-areas:

      "hd hd hd hd   hd   hd   hd   hd   hd"

      "sd sd sd main main main main main main"

      "ft ft ft ft   ft   ft   ft   ft   ft";