我不明白网格 CSS 在做什么答案

【问题标题】：I can't understand what the grid CSS is doing我不明白网格 CSS 在做什么
【发布时间】：2021-02-27 09:29:51
【问题描述】：

我尝试使用边距，使用填充，在边缘开发工具中查看网格...我所能看到的是，不知何故，网格就像一个“粘性”显示，因为它当我添加一些填充时，与 X 轴滚动一起移动。我的 CSS 是：

@font-face {
  font-family: "Lobster";
  src: url("./fonts/Lobster-Regular.ttf") format("true-type");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.bodyGridWrapper {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 132px auto 92px;
  grid-template-columns: 186px 6fr 1.5fr;
  grid-template-areas: "header header header" "main main aside" "footer footer footer ";
}

header {
  color: #fff;
  background: #8AB1F5;
  width: 100%;
  height: 132px;
  grid-area: "header";
  grid-column: 1/ 4;
  grid-row-start: 1;
  grid-row-end: 4;
}

header>div#logo {
  font-family: "Lobster", cursive;
  width: 100%;
  height: 82%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  grid-area: "main";
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

nav {
  color: #fff;
  height: 18%;
}

nav>ul {
  margin-left: auto;
  display: flex;
  width: 30%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  list-style: none;
}

nav>ul li a {
  color: none;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .05em;
}

aside {
  grid-area: "aside";
  width: 100%;
  min-height: 100%;
  grid-column-start: 3;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  overflow: none;
}

aside>form>input {
  color: #AAA;
  border-radius: 10px;
  width: 100%;
  height: 35px;
  font-size: 18px;
  border: 1px solid #AAA;
  text-align: center;
}

aside>form>input:focus {
  outline: none;
}

footer {
  background: #8AB1F5;
  grid-area: "footer";
  grid-column: 1/4;
  grid-row: 3/4;
  height: 100%;
}

footer ul {
  height: 100%;
}

footer ul li {
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
}

footer ul li a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}

.subtitulo {
  color: #8AB1F5;
  margin: 10px;
  font-size: 22px;
  font-weight: bold;
}

.asidePost {
  background: #fee;
  width: 100%;
  height: 300px;
  margin: 20px;
}

但 div 位于页脚下方。我不知道在这种情况下该怎么做，因为我在 CSS 方面遇到了很多困难，甚至规范也对我很苛刻。

【问题讨论】：

你能解释一下你想用那个网格做什么吗？所以社区可以为你提供实用的答案。
您能否添加足够的 HTML 以使 sn-p 工作，谢谢。

标签： html css layout grid frontend

【解决方案1】：

我知道发生了什么。问题是我希望旁白尊重页脚，但我已将旁白的最后一行设置为与页脚相同。这导致侧面进入页脚下方并在第 4 行结束。我还在侧面内的 div 处设置了边距，使溢出 X。修复该属性使问题消失。

【讨论】：