CSS网格模板区域没有自动列范围

Question

[我是使用CSS网格的新手，并看到了一些视频，在所有视频中，我都看到了grid-template-areas属性，这似乎很酷，因为您只需定义相同的名称来跨越网格项的列或行，但这对我没有用，这是我的html：

body {
  display: grid;
  grid-template-areas: "header header" "adds content";
  grid-template-rows: 3em auto;
  grid-template-columns: 20em 1fr;
}

.top-menu {
  grid-area: "header";
  grid-column: span 2;
  background-color: #B6B0A9;
}

<div class="top-menu">
  <ul>
    <li><a href="#" class="menu-item">Hi</a></li>
    <li><a href="#" class="menu-item">Lo</a></li>
  </ul>
</div>

[当我只使用grid-area:"header";时，带有顶部菜单类的div不在两列中，这就是为什么我不得不使用grid-column:span 2;导致我遗漏了一些关于网格模板区域行为的原因？还是这不是正确的配置？

Answer 1

这是我在开始使用网格时也遇到的困难，很容易忽略：

使用grid-area时，您无需使用"来定义区域。因此，请使用"header"代替header

body {
  display: grid;
  grid-template-areas: "header header" "adds content";
  grid-template-rows: 3em auto;
  grid-template-columns: 20em 1fr;
}

.top-menu {
  grid-area: header;
  grid-column: span 2;
  background-color: #B6B0A9;
}

.adds {
  grid-area: adds;
}

.content {
  grid-area: content;
}

<div class="top-menu">
  <ul>
    <li><a href="#" class="menu-item">Hi</a></li>
    <li><a href="#" class="menu-item">Lo</a></li>
  </ul>
</div>

<div class="adds">
  Some adds
</div>
<div class="content">
  Here is some content
</div>