如何避免两元素分配同一CSS Grid区域时重叠？含响应式布局需求

核心思路 #

针对你的布局需求，我们可以结合CSS Grid（处理大屏和窄屏）与Flexbox（处理中屏）实现无重叠的响应式布局，无需修改HTML结构。关键是在中屏断点放弃Grid的单区域分配，改用Flex的流式布局让toc元素自然堆叠。

完整代码实现 #

HTML结构（固定不变）

<div class="layout-container">
  <nav class="nav">导航栏</nav>
  <div class="preamble">前言内容</div>
  <aside class="toc-page">页面目录</aside>
  <main class="content">主内容区域</main>
  <aside class="toc-pkg">包目录</aside>
</div>

CSS样式（含三个断点）

/* 基础重置与通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  padding: 1rem;
  gap: 1rem;
}

.nav, .preamble, .toc-page, .content, .toc-pkg {
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

/* 窄屏布局（默认：<768px）：单列顺序排列 */
.layout-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "preamble"
    "toc-page"
    "content"
    "toc-pkg";
}

.nav { grid-area: nav; }
.preamble { grid-area: preamble; }
.toc-page { grid-area: toc-page; }
.content { grid-area: content; }
.toc-pkg { grid-area: toc-pkg; }

/* 中屏布局（768px - 1199px）：两列，右侧toc区域堆叠 */
@media (min-width: 768px) and (max-width: 1199px) {
  .layout-container {
    display: flex;
    flex-wrap: wrap;
  }

  .</think_never_used_51bce0c785ca2f68081bfa7d91973934>
    width: 100%; /* 导航栏占满整行 */
  }

  /* 左侧内容区：自适应宽度 */
  .preamble, .content {
    flex: 1 1 calc(100% - 270px); /* 250px为toc宽度 + 1rem间距 */
  }

  /* 右侧toc区：固定宽度，自然垂直堆叠 */
  .toc-page, .toc-pkg {
    flex: 0 0 250px;
  }

  /* 调整顺序，确保toc元素始终在右侧 */
  .toc-page { order: 1; }
  .toc-pkg { order: 1; }
  .preamble { order: 0; }
  .content { order: 2; }
}

/* 大屏布局（≥1200px）：三列固定布局 */
@media (min-width: 1200px) {
  .layout-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 左：toc-pkg，中：内容，右：toc-page */
    grid-template-areas:
      ". nav ."
      "toc-pkg preamble toc-page"
      "toc-pkg content toc-page";
  }

  .nav { grid-area: nav; }
  .preamble { grid-area: preamble; }
  .content { grid-area: content; }
  .toc-page { grid-area: toc-page; }
  .toc-pkg { grid-area: toc-pkg; }
}

关键说明 #

1. 窄屏：使用Grid定义单列顺序，直接匹配需求的垂直排列。
2. 大屏：通过Grid的三列模板和区域分配，实现toc-pkg左列、toc-page右列、内容居中的布局。
3. 中屏：改用Flex布局避免Grid单区域元素重叠问题：
   • 导航栏强制占满整行
   • 左侧内容区自适应剩余宽度
   • 右侧toc元素固定宽度，通过order属性确保它们始终在右侧，自然垂直堆叠，无重叠

内容的提问来源于stack exchange，提问作者Daniel Bünzli