为什么两个 div 之间的网格模板区域内的句点没有创建空白空间？

Question

我已经指定了两个 div 的区域，标记为类 search1 和 search2。它们是标有 id searchContainer 的 div 的子级。这是使用的 CSS 和 Pug 模板代码：

CSS代码

#search1{
  grid-area: "search1"
}

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

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

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')

我最初将所有 3 个作为 id，而不是 1 个 id div 和 2 个类 div。

Answer 1

它正在工作，真正的问题是如何调用元素上的网格区域。您在网格区域名称周围使用引号 (

" "

)。这是无效的，应该是

grid-area: "search1";

，而不是

grid-area: search1;

。

#search1{
  grid-area: search1;
}

#search2{
  grid-area: search2;
}

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

<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>