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

Question

帮我说说为什么网格区域不能正常工作。我也在 nav、main 和 contents 上使用过它，但输出是意外的（附在下面）。所有元素都排列在页脚下方，元素不在该位置。

请帮助我......我是一名网络编码员，正在在线学习网络开发

.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

这里面有两个问题：

您定义了 4 列，但在网格模板区域中您使用了三个“侧边栏 content1 content2”

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

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

解决方法：- 你可以把区域名称改成侧边栏。

Answer 2

除了Pawan的回答，

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

grid-area: sidebar;

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

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

Why does my grid are works for footer only?

html

css

syntax-error

css-grid