为何grid-template-areas中的句点无法在两个div间创建空白区域？

我为id分别为search1和search2的两个div指定了网格区域，它们是id为searchContainer的div的子元素。最初我将三个元素都设置为id，而非采用「一个id容器div搭配两个class div」的写法。

Pug模板代码 #

.searchContainer
    div#search1
        .form-outline
            input.form-control(aria-label="Search" placeholder="Type query" type="search")
    div#search2
        .input-group.mb-3
            .input-group-prepend
                button.btn.btn-outline-secondary(type='button') Button
            input.form-control(type='text' placeholder='' aria-label='' aria-describedby='basic-addon1')

编译后的HTML代码 #

<div class="searchContainer">
  <div id="search1">
    <div class="form-outline">
      <input class="form-control" aria-label="Search" placeholder="Type query" type="search"/>
    </div>
  </div>
  <div id="search2">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
      <input class="form-control" type="text" placeholder="" aria-label="" aria-describedby="basic-addon1"/>
    </div>
  </div>
</div>

CSS样式代码 #

#search1{
  grid-area: "search1"
}

#search2{
  grid-area: "search2";
}

.searchContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "search1 . search2"
}

内容的提问来源于stack exchange，提问作者CubeDomination