CSS "grid-template-areas" not working as desired - html

Question

I thought that when I type . (blank field) inside grid-template-areas property, .item5 will show inside under field. However it showing inside . field. Why does it works like that?
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Answer 1

From the specification:
A sequence of one or more "." (U+002E FULL STOP), representing a null cell token.
and
A null cell token represents an unnamed area in the grid container.
unnamed area doesn't mean that an item cannot be placed there. It simply mean unnamed and the automatic placement algorithm will start from the top to the bottom so the first empty area for item5 is an unnamed area.
You can follow the full algorithm here: https://www.w3.org/TR/css-grid-1/#auto-placement-algo where you will find no restriction about unnamed area or the named one. If your item5 was alone it will get placed into the first row/column (the one named "header")
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item5">5</div>
</div>
Related question where I am giving a more detailed explanation about the placement algorithm:
CSS Grid : How Auto placement algorithm works

Answer 2

Based on your last comment, I think that you are expecting to have grid-auto-flow: column;, but this is not the default style.
I added it to the snippet:
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
grid-auto-flow: column;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>