无法理解的网格模板区域

Question

我正在练习网格，现在我正在尝试网格模板区域，但与我下面的示例相比，我不清楚一件事：

HTML：

 <div id="app">
   <div class="grid-container">
    <div class="grid-item1">Sono l'1</div>
    <div class="grid-item2">Sono il 2</div>
    <div class="grid-item3">Sono il 3</div>
    <div class="grid-item4">Sono il 4</div>
    <div class="grid-item5">Sono il 5</div>
    <div class="grid-item6">Sono il 6</div>
   </div>
 </div>

CSS：

 .grid-container {
   display: grid;
   grid-template-rows: 200px 200px 200px;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 5px;
   grid-template-areas:
     'area1 area1 area1 area1 area1'
     'area2 area2 . area3 area3'
     'area2 area2 area4 area4 area4';
 }

 .grid-item1 {
   background: blue;
   text-align: center;
   border: black 5px solid;
   grid-area: area1;
 }

 .grid-item2 {
   background: red;
   text-align: center;
   border: black 5px solid;
   grid-area: area2;
 }

 .grid-item3 {
   background: green;
   text-align: center;
   border: black 5px solid;
   grid-area: area3;
 }
 .grid-item4 {
   background: yellow;
   text-align: center;
   border: black 5px solid;
   grid-area: area4;
 }

我遵循的示例说“如果您不想分配一个单元格而是将其留空，只需插入一个句点。”，但是在我的练习中，如何在该空的中央单元格中插入 div 5 呢？我原以为 5 会在 6 之前跌破......

我还为那些想要更多理解的人创建了一个stackblitz： https://stackblitz.com/edit/js-tfljyr?file=style.css