如何让CSS网格最后一项换行后自动占满屏幕宽度？

当然有比手动写媒体查询更聪明的办法！我们可以利用CSS的结构性伪类和Grid的原生特性，自动识别布局状态，让最后一个元素在需要的时候占满整行。

核心实现思路 #

当你的网格从3列缩成2列时，说明此时页面宽度刚好放不下三个30rem的容器，而总元素数是3个（前两个各占一列，第三个换行）。这时最后一个元素刚好是奇数位置的最后子元素，我们可以用伪类精准选中它，然后让它横跨整个网格。

完整代码示例 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1rem;
}

/* 仅当最后一个元素是奇数位时（2列布局下最后一行只有它一个），让它占满整行 */
.grid-container > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

为什么这个方法有效？ #

• :last-child:nth-child(odd)：这个复合选择器只会命中两种情况的元素：既是父容器的最后一个子元素，同时在所有子元素里处于奇数位置（比如第3、5、7...个）。刚好对应2列布局下最后一行只有单个元素的场景。
• grid-column: 1 / -1：这是Grid的语法，让元素从第一列起始线延伸到最后一列的结束线，直接占满整个网格的宽度。

额外适配 #

如果你的元素数量不止3个（比如5个），这个方案依然管用：2列布局下前4个元素会排成2行2列，第5个元素自动占满整行，完全不用额外调整。

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