CSS Grid auto-fit布局如何选中每行最后一个元素设置特殊样式？

结论 #

目前CSS Grid没有原生支持直接选中每行最后一个元素的专用伪类，但不需要依赖媒体查询也能实现需求，用容器查询配合:nth-child选择器就能实现比媒体查询更灵活的适配效果。

为什么没有原生Grid能力支持？ #

auto-fit生成的列数是浏览器在渲染阶段根据容器实时宽度计算出来的，属于布局层面的状态，而CSS现有选择器都是基于DOM结构匹配，无法直接感知渲染后的元素行位置，所以暂时没有原生的一行代码搞定的方案。

推荐实现方案（容器查询 + nth-child，兼容性Chrome 105+/Safari 16+/Firefox 110+） #

你设置的列最小宽度是300px，所以列数永远是容器宽度除以300px取整的结果，我们可以基于容器宽度做查询，匹配不同列数下的行尾元素：

首先给Grid容器开启容器查询能力：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* 开启基于容器行内宽度的查询能力 */
  container-type: inline-size;
  gap: 16px; /* 如果有设置间距，需要把间距值算到断点阈值里 */
}

然后对应不同列数写样式：

/* 1列：容器宽度 < 300px*2 + 16px间距 = 616px，所有元素都是行尾 */
@container (max-width: 615px) {
  .grid > div {
    /* 你的特殊样式，此处为示例 */
    margin-right: 0;
    background: #e0f2fe;
  }
}

/* 2列：容器宽度 616px ~ 931px，选中第2、4、6...个元素 */
@container (min-width: 616px) and (max-width: 931px) {
  .grid > div:nth-child(2n) {
    margin-right: 0;
    background: #e0f2fe;
  }
}

/* 3列：容器宽度 932px ~ 1247px，选中第3、6、9...个元素 */
@container (min-width: 932px) and (max-width: 1247px) {
  .grid > div:nth-child(3n) {
    margin-right: 0;
    background: #e0f2fe;
  }
}

/* 更多列数按照「每增加300px宽度+16px间距」的规则向上累加断点即可 */

这个方案比媒体查询灵活很多，不管你的Grid容器放在页面哪个位置（侧边栏、弹窗、嵌套卡片），都会根据容器自身的宽度适配，不会受页面其他元素的影响。

旧浏览器兼容方案 #

如果需要兼容不支持容器查询的浏览器，就把上面的@container替换成@media，断点宽度根据你的Grid容器在页面里的实际宽度计算即可，逻辑完全一致。

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