CSS Grid：能否通过纯CSS根据子项数量动态调整列数？

嘿，你的需求完全可以用纯CSS搞定，但得先澄清一点：grid-auto-columns帮不上这个忙——这个属性的作用是定义「隐式网格列」的宽度，也就是当子元素超出你显式定义的网格列范围时，自动生成的列的尺寸，它没法根据子元素的数量动态调整显式网格的列数。

正确的纯CSS实现方案 #

我们可以利用CSS的:has()伪类，结合子元素的数量来动态修改grid-template-columns的值，完美匹配你的规则：

/* 基础网格样式 */
.grid {
  height: 100%;
  display: grid;
  grid-auto-rows: auto;
}

/* 规则1：子项1-6个时，显示1列 */
.grid:has(> :nth-child(-n+6)):not(:has(> :nth-child(7))) {
  grid-template-columns: 1fr;
}

/* 规则2：子项7-12个时，显示2列 */
.grid:has(> :nth-child(n+7)):not(:has(> :nth-child(13))) {
  grid-template-columns: repeat(2, 1fr);
}

/* 规则3：子项超过12个时，显示3列 */
.grid:has(> :nth-child(13)) {
  grid-template-columns: repeat(3, 1fr);
}

代码解释 #

• :has(> :nth-child(-n+6))：匹配包含第1到第6个子元素的网格容器
• :not(:has(> :nth-child(7)))：排除掉包含第7个及以上子元素的容器，精准锁定1-6个元素的场景
• 同理，n+7表示第7个及以后的元素，not(:has(> :nth-child(13)))排除13个及以上的元素，对应7-12个元素的需求
• 最后，只要容器里存在第13个元素，就自动切换为3列布局

兼容性说明 #

:has()伪类目前已经被Chrome、Firefox 121+、Safari等主流浏览器支持，如果你的项目需要兼容更老的浏览器（比如旧版Firefox），那可能需要用JavaScript辅助统计子元素数量，再给容器添加对应的类来切换列数，但纯CSS的方案在现代浏览器环境下完全可用。

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