能否用CSS Grid实现：移除其他div后Next按钮占满容器宽度？

我明白你的需求啦：当容器里的某个按钮（比如第一个容器里的「Previous」）被移除后，剩下的「Next」按钮要自动撑满整个容器的宽度，同时中间的div得留在同一个容器里，方便后续在平板/桌面端用媒体查询调整位置。

直接给你修改好的代码，思路也给你讲清楚：

修改后的HTML（保留你原有的结构，不用动） #

<div class="container">
  <div class="item item--1">Page 1 of 20</div>
  <div class="item item--2">Previous</div>
  <div class="item item--3">Next</div>
</div>
<div class="container" style="margin-top: 40px;">
  <div class="item item--1">Middle</div>
  <div class="item item--2">Next</div>
</div>

修改后的CSS（核心调整在这里） #

.container {
  display: grid;
  grid-template-rows: auto auto; /* 用auto适配内容高度，比1fr更灵活 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 关键：自动适配列数 */
}

.item {
  background: yellow;
  border: 1px solid grey;
  text-align: center;
  padding: 8px; /* 加个内边距让按钮更美观 */
}

.item--1 {
  grid-column: 1 / -1; /* 强制占满整行，不管下面有多少列 */
}

为什么这么改？ #

• repeat(auto-fit, minmax(0, 1fr))：这个Grid属性会自动根据容器内的元素数量调整列数——当第二行有2个按钮时，它们各占一半宽度；当其中一个被移除后，剩下的按钮会自动撑满整个第二行的宽度，完全符合你的需求。
• grid-column: 1 / -1：让顶部的状态文本（比如「Page 1 of 20」「Middle」）始终占满第一行的所有列，不管下面有多少按钮，布局不会乱。
• 去掉了原代码里对item--2和item--3的硬编码行/列设置，让Grid的自动流布局来处理第二行的元素排列，这样后续不管是移除哪个按钮，布局都能自动适配。

如果你需要更精准的控制（比如只针对第二行只剩一个元素的情况），还可以加个可选的伪类规则：

/* 可选：当第二行只有一个按钮时强制占满 */
.container .item:nth-child(n+2):only-child {
  grid-column: 1 / -1;
}

这样调整后，不管是移除第一个容器里的「Previous」按钮，还是第二个容器本来就只有一个「Next」按钮，它们都会自动占满容器宽度，同时中间的div也稳稳待在容器里，后续改媒体查询调整位置也完全没问题~

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