如何让CSS Grid子元素根据数量自动占据可用空余列空间

可以通过CSS子元素伪类组合实现该需求，无需引入JavaScript。
核心实现逻辑是利用CSS伪类匹配子元素数量，仅当网格容器内恰好存在2个网格项时，为最后一个网格项添加跨2列的属性。

完整修改后的CSS代码如下：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
}

.grid-item {
  padding: 50px;
  color: white;
  background-color: lightpink;
}

/* 匹配容器内恰好只有2个网格项的场景，选中最后1个项设置跨2列 */
.grid-item:nth-child(2):nth-last-child(1) {
  grid-column: span 2;
}

/* 可选扩展：匹配容器内只有1个网格项时，自动跨3列占满整行 */
.grid-item:nth-child(1):nth-last-child(1) {
  grid-column: span 3;
}

实现原理说明 #

• :nth-child(2) 匹配作为父容器第2个子元素的网格项
• :nth-last-child(1) 匹配作为父容器倒数第1个子元素的网格项
• 两个伪类同时生效时，说明父容器内恰好只有2个网格项，此时为最后一个项设置跨列属性即可完全匹配需求：3个元素时每个占1列，2个元素时第二个自动占满剩余2列。

最终实现效果如下图：

内容的提问来源于stack exchange，提问作者D-Money