本文详解如何在双列父级 grid 布局中，使嵌套的三列 grid 在小屏幕下突破父容器限制、实现 100% 全宽显示，关键在于动态重置父容器网格轨道并解除嵌套元素的列约束。

本文详解如何在双列父级 grid 布局中，使嵌套的三列 grid 在小屏幕下突破父容器限制、实现 100% 全宽显示，关键在于动态重置父容器网格轨道并解除嵌套元素的列约束。

在响应式 Grid 布局中，当父容器采用 grid-template-columns: 2fr 1fr 并包含一个

侧边栏时，即使通过 order 和 grid-column: span 2 将 aside 提升至顶部并横跨两列，其 DOM 位置和父级网格结构仍会影响子级嵌套 Grid 的可用宽度——尤其在移动端，.nested-grid 默认仍受限于其直接父

所占据的 2fr 轨道宽度，无法真正铺满视口。

根本解法不是仅修改嵌套容器自身（如仅设 grid-template-columns: 1fr），而是协同调整父级网格结构：在小屏幕媒体查询中，将 .outer-grid-container 的列定义从 2fr 1fr 彻底重置为 100% 0px，并清除 gap，从而逻辑上“移除” aside 的列占位；同时确保嵌套 Grid 的 width 或 max-width 不再构成瓶颈，并通过 grid-column: span 2（或更稳妥的 1 / -1）显式声明其应横跨全部可用列轨道。

以下是优化后的完整实现：

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

.outer-grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

.outer-header {
  text-align: center;
  font-size: 3rem;
}

.nested-grid {
  display: grid;
  /* 初始状态：三等分自适应 */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* max-width 仅用于大屏约束，小屏需解除 */
  max-width: 1200px;
  margin: 0 auto; /* 居中兼容性保障 */
}

.articles {
  background-color: lightcoral;
  padding: 60px 20px;
}

aside {
  background-color: lightcyan;
  border-left: 3px solid black;
}

/* 小屏幕断点：关键响应式修正 */
@media (max-width: 849px) {
  /* 1. 重置父网格：使 aside 的 span 2 生效，且第一列不再被分割 */
  .outer-grid-container {
    grid-template-columns: 100% 0px; /* 主内容占满，aside 列宽度归零 */
    column-gap: 0;
  }

  /* 2. 确保嵌套 Grid 横跨全部列轨道（含逻辑上“隐藏”的第二列） */
  .nested-grid {
    grid-column: 1 / -1; /* 推荐写法：从第1条线到最后一根线 */
    /* 或可选：grid-column: span 2; */
    grid-template-columns: 1fr; /* 单列流式布局 */
  }

  /* 3. 调整标题与 aside 的视觉顺序和跨度 */
  .outer-header {
    font-size: 1rem;
    order: -1;
    grid-column: 1 / -1;
  }

  aside {
    order: -2;
    grid-column: 1 / -1;
  }
}

<div class="outer-grid-container">
  <div>
    <p class="outer-header">Lorem, ipsum dolor.</p>
    <div class="nested-grid">
      <article class="articles"><h3>Lorem</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </article><article class="articles"><h3>Lorem</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </article><article class="articles"><h3>Lorem</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </article>
</div>
  </div>
  <aside><h2>Hello world</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
  </aside>
</div>

✅ 关键要点总结：

• ❌ 错误思路：仅修改 .nested-grid 的 grid-template-columns（如 1fr）而忽略父级轨道约束，嵌套容器仍受 2fr 宽度限制；
• ✅ 正确路径：双管齐下——父容器 grid-template-columns: 100% 0px 消除列宽竞争，嵌套容器 grid-column: 1 / -1 显式声明全跨度；
• ⚠️ 注意事项：max-width: 1200px 在小屏下会成为新瓶颈，建议配合 width: 100% 或使用 clamp() 函数实现弹性约束；box-sizing: border-box 已全局启用，无需重复声明；
• ? 进阶提示：若需更精细控制（如 aside 在小屏变为底部固定栏），可结合 position: sticky 或独立媒体查询进一步优化。

该方案完全符合现代 CSS Grid 响应式设计原则，语义清晰、无 JS 依赖，且在 Chrome、Firefox、Safari 及 Edge 中均表现一致。