Html CSS网格的属性值无效

我正在使用css网格，我正在试图弄清楚为什么我一直在使用的代码不起作用。以下是我的html5代码：

<div class="grid">
      <header class="nav--header">
        <nav class="nav--wrapper">
          <div class="nav--elm">
            <a href="./">
            <span class="nav--elmText"><img src="./assets/img/Rep-Center-Logo.svg"></span>
          </div>
        </nav>
      </header>
      <div class="sidebar">
      </div>
      <div class="content">
      </div>
      <footer class="nav--footer">
      </footer>
</div>

---

如果您觉得有什么不正确的地方，请告诉我。

您忘记在

之后关闭带有

的超链接。错误大写：

grid-template-areas:
"header header header header"
"sidebar content content content"
"CONTENT content content content"
"footer footer footer footer";

不能有不是单个矩形的栅格区域。如果您这样做，它会起作用：

grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";

---

调试这些代码通常最简单的方法是，一行一行地添加所有内容，看看哪里有中断，前两行工作正常，但第三行中断，这意味着这就是问题所在。通过检查，您可以看到问题。

这不会破坏他们的网格，特别是因为这是一个非常重要的问题。不要忘记添加网格模板行。

grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";