CSS断点设置问题：浏览器变宽时footer与main元素偏移而非居中

问题描述 #

我正在学习设置CSS断点，当浏览器宽度增加时，footer和main元素会突然向右偏移，无法保持居中。怀疑是div结构或媒体查询的问题。

HTML代码 #

<body>
    <h1>Your Quiz App Profile</h1>

    <div class="container">
      <div class="main">
        <p>
          About Me.. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Adipisci similique deleniti aperiam! Vitae quae nulla harum mollitia
          placeat. Ipsa ab consequatur distinctio totam commodi unde doloribus a
          quae ipsam incidunt. Lorem, ipsum dolor sit amet consectetur
          adipisicing elit. Facere id cum iste vero magni earum repudiandae
          temporibus molestias illum assumenda? Architecto fugiat ipsam
          repudiandae eligendi pariatur quis facere nostrum similique!
        </p>
      </div>
      <div class="myName">My Name</div>
      <div class="profilePicture">Profile Picture</div>
      <div class="icon1">#HTML</div>
      <div class="icon2">#CSS</div>
      <div class="icon3">#JavaScript</div>
      <div class="icon4">#Git</div>
      <div class="footerclass">
        <footer>
          <p>Footer</p>
        </footer>
      </div>
    </div>
</body>

CSS代码 #

* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.4rem;
}

body {
  background-color: lightgray;
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-template-rows: 150px 300px 200px 150px 150px;
  gap: 20px;
  font-size: 30px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));

  grid-template-areas:
    "header header header picture"
    "main main main main"
    "main main main main"
    "icon icon icon icon"
    "footer footer footer footer";
}

h1 {
  text-align: center;
  padding: 14px 20px;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 2rem;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: rgb(87, 235, 28);
  margin-top: 3em;
  margin-bottom: 4em;
}

.main {
  background-color: hsl(168, 76%, 42%);
  grid-area: main;
  margin-bottom: 3rem;
  height: auto%;
}

.main > p {
  padding: 1em;
}

.myName {
  padding: 16px;
  background-color: #1abc9c;
  grid-area: header;
  margin-bottom: 2em;
}

.profilePicture {
  padding: 16px;
  background-color: rgb(28, 117, 235);
  text-align: center;
}

.footer {
  padding: 2em;
  background-color: rgb(115, 106, 123);
  grid-area: footer;
  text-align: center;
  width: 100%;
}

.icon1 {
  background-color: rgb(28, 117, 235);
  text-align: center;
  margin-bottom: 3em;
  height: 6rem;
}

.icon2 {
  background-color: rgb(28, 117, 235);
  text-align: center;
  margin-bottom: 3em;
  height: 6rem;
}

.icon3 {
  background-color: rgb(28, 117, 235);
  text-align: center;
  margin-bottom: 3em;
  height: 6rem;
}

.icon4 {
  background-color: rgb(28, 117, 235);
  text-align: center;
  margin-bottom: 3em;
  height: 6rem;
  justify-content: center;
}

.footerclass {
  background-color: gray;
  margin-top: auto;
  align-items: center;
  width: 30em;
  height: 10rem;
  position: absolute;
  bottom: 0;
}

footer > p {
  text-align: center;
  font-size: 2rem;
}

@media only screen and (min-width: 768px) {
  .footerclass {
    width: 600px;
}

问题根源 #

1. Footer脱离网格布局：.footerclass使用position: absolute脱离了容器的网格流，默认相对于body定位，修改宽度后没有居中规则，自然出现偏移。
2. 网格列定义冲突：.container中重复定义grid-template-columns，后写的规则覆盖前一个，导致网格列计算异常，影响main元素布局。
3. 网格区域关联错误：网格模板里定义了footer区域，但.footerclass未设置grid-area: footer，完全没参与网格布局。
4. Margin与网格Gap冲突：.main的margin-bottom和网格的gap叠加，导致布局错位。

修复步骤 #

1. 让Footer回到网格中 #

删除.footerclass的绝对定位、固定宽度，添加网格区域关联：

.footerclass {
  background-color: gray;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  grid-area: footer; /* 关联到网格的footer区域 */
}

同时删除无效的.footer样式（HTML中无此类名）。

2. 修复网格布局冲突 #

删除重复的grid-template-columns，修正网格区域的icon命名（匹配实际类名）：

.container {
  display: grid;
  grid-template-rows: 150px 300px 200px 150px 150px;
  gap: 20px;
  font-size: 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 用1fr保证列宽稳定 */
  grid-template-areas:
    "header header header picture"
    "main main main main"
    "main main main main"
    "icon1 icon2 icon3 icon4" /* 对应四个icon的类名 */
    "footer footer footer footer";
}

给四个icon添加网格区域关联：

.icon1 { grid-area: icon1; }
.icon2 { grid-area: icon2; }
.icon3 { grid-area: icon3; }
.icon4 { grid-area: icon4; }

3. 优化媒体查询 #

媒体查询中无需给footer固定宽度，让它随网格自动适应：

@media only screen and (min-width: 768px) {
  .footerclass {
    /* 删除width: 600px; */
  }
}

4. 调整Main元素的Margin #

删除.main的margin-bottom，用网格的gap控制间距：

.main {
  background-color: hsl(168, 76%, 42%);
  grid-area: main;
  /* 删除margin-bottom: 3rem; */
  height: auto;
}

内容的提问来源于stack exchange，提问作者motionlesseuphoric