如何安全移除CSS Grid布局中的Nav元素并让Main区域扩展？

需求说明 #

需要移除布局中的红色Nav元素，同时让Main区域自动占据原本Nav+Main的空间，保持Header、Main、Aside、Footer的布局结构不变，且兼容移动端响应式效果。

步骤1：清理HTML代码 #

直接删除HTML中的<nav>标签及其内容，修改后的HTML代码如下：

<body>
  <div class="container">
    <header>
      this is the header
    </header>
    <main>
      this is the main
    </main>
    <aside>
      this is the aside
    </aside>
    <footer>
      this is the footer
    </footer>
  </div>
</body>

步骤2：调整CSS Grid布局配置 #

需要修改Grid的模板区域、列定义，同时移除Nav相关的样式，并更新移动端媒体查询：

修改点说明： #

1. 移除Nav的CSS样式：直接删掉.container外的nav选择器代码
2. 调整Grid模板区域：
   • 原grid-template-areas中第二行的nav content side改为content side，让Main和Aside占据第二行的两列
   • Header和Footer的模板区域从三列改为两列（"header header"和"footer footer"），确保它们横跨整个容器宽度
3. 修改列宽定义：原grid-template-columns: 200px 1fr 200px改为1fr 200px，让Main占满剩余空间，Aside保持200px宽度
4. 更新移动端媒体查询：
   • 移除模板区域中的"nav"行
   • 删除grid-template-rows中对应Nav的minmax(75px, auto)行
   • 移除nav, aside选择器中的nav，只保留aside的margin设置

修改后的完整CSS代码如下：

body {
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "content side"
    "footer footer";
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}
header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}
main {
  grid-area: content;
}
aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}
footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "side"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      1fr /* Content */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
  }
  aside {
    margin: 0;
  }
}

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