父网格含aside时，如何让嵌套网格占满整个页面？

我创建了一个两列结构的父网格，右侧为aside栏；在父网格的第一列内部，又嵌套了一个三列的网格布局。小屏幕下我调整了元素顺序，让aside显示在最顶部，但此时嵌套网格无法占满整个屏幕宽度——它依然受原父网格列结构的限制，只能占据第一列的宽度。我需要嵌套网格在小屏幕下能像aside不存在一样，完全铺满屏幕宽度。

原代码如下：

CSS代码 #

* {
  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(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.5rem;
  max-width: 1200px;
}

.articles img {
  width: 100%;
}

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

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

@media (max-width: 849px) {
  aside {
    order: -2;
    grid-column: span 2;
  }
  .outer-header {
    font-size: 1rem;
    order: -1;
    grid-column: span 2;
  }
}

HTML代码 #

<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. Iusto autem repudiandae quae! Autem dolorem voluptatibus perferendis! Placeat architecto tempora rem consequatur? Ipsam dolorem magni illo eum mollitia reprehenderit architecto quaerat.
    </p>
  </aside>
</div>

问题核心是：小屏幕下，包裹outer-header和nested-grid的父容器（outer-grid-container的第一个直接子元素）仍然只占据原父网格的第一列宽度（2fr），没有跨满整个父网格。

有两种简单的解决方式：

方式一：修改父网格为单列布局（推荐） #

在媒体查询中，将父网格的列模板改为单列，这样所有子元素默认都会占满屏幕宽度：

@media (max-width: 849px) {
  /* 父网格切换为单列 */
  .outer-grid-container {
    grid-template-columns: 1fr;
  }
  aside {
    order: -2;
    /* 单列下无需span 2，span 1即可（可省略） */
    grid-column: span 1;
  }
  .outer-header {
    font-size: 1rem;
    order: -1;
    grid-column: span 1;
  }
}

方式二：让包裹容器跨满父网格所有列 #

如果不想修改父网格的列数，直接让包裹outer-header和nested-grid的容器跨满2列即可：

@media (max-width: 849px) {
  aside {
    order: -2;
    grid-column: span 2;
  }
  .outer-header {
    font-size: 1rem;
    order: -1;
    grid-column: span 2;
  }
  /* 新增：让包裹嵌套网格的容器跨满2列 */
  .outer-grid-container > div:first-child {
    grid-column: span 2;
  }
}

两种方式都能让嵌套网格在小屏幕下完全铺满屏幕宽度，实现你想要的效果。

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