为什么我的网格仅适用于页脚？

Question

请告诉我为什么网格区域不能正常工作。我也在导航、主要和内容上使用过它，但输出是意外的（附在下面）。所有元素都排列在页脚下方，并且元素不在此处。

请帮帮我......我是一名 nw 编码员，正在在线学习 Web 开发

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.5fr 0.8fr;
  grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2" "sidebar footer footer footer";
}

footer {
  grid-area: footer;
  background: aqua;
}

nav {
  grid-area: nav;
  background: rgb(208, 212, 212);
}

main {
  grid-area: main;
  background: rgb(255, 0, 0);
}

#sidebar {
  grid-area: side;
  background: rgb(238, 255, 0);
}

#content1 {
  grid-area: content1;
  background: rgb(81, 255, 0);
}

#content2 {
  grid-area: content2;
  background: rgb(255, 0, 255);
}

<div class="layout">
  <nav id="navbar">Home About us contact us</nav>
  <main>Main</main>
  <div id="sidebar">Sidebar</div>
  <div id="content1">Content 1</div>
  <div id="content2">Content2</div>
  <footer>Footer</footer>
</div>

输出：

Answer 1

除了Pawan的回答，

1. 您必须将grid-template 属性添加到css 中的layout。
2. 您在grid-template-rows 属性中指定了3 行，但在grid-template-areas 中包含了4 行。
3. （来自Pawan 的回答）您定义了4 列，但在网格模板区域中您使用了三个sidebar content1 content2。如果要忽略列，可以添加句点 (.)，例如sidebar . content1 content2。
4. （来自Pawan 的回答）您的侧边栏有错误的grid-area。只需在#sidebar 中更改为grid-area: sidebar;。

一个可行的解决方案（JS Fiddle Link）：https://jsfiddle.net/hetkxj03/

Answer 2

这里有两个问题：

1. 您定义了 4 列，但在网格模板区域中您使用了三个“侧边栏内容 1 内容 2”

解决方案：- 添加句点。或者您可以添加增加其面积的 content1 或 content2。

1. #sidebar 使用了错误的名称。侧边而不是侧边栏。

解决方案：- 可以将区域名称更改为侧边栏。