:has()无法控制grid-template-columns列数，因其仅为选择器，不参与布局计算；唯一响应内容数量的可靠方案是auto-fit + minmax()。
不能用 :has() 控制列数——它和 grid-template-columns 无直接联动关系，目前所有浏览器都不支持。
为什么 :has() 无法驱动列数变化
:has() 是一个选择器，只能匹配满足条件的父容器（比如“包含至少 5 个子元素”的 .grid），但它不能触发 CSS 属性计算或重排逻辑。而 grid-template-columns 的值必须是静态声明或由变量/函数（如 repeat()）在解析时确定，:has() 不参与该过程。
常见误解是写类似这样的规则：
.grid:has(> :nth-child(5)) {
grid-template-columns: repeat(5, 1fr);
}
这不会生效：浏览器忽略整条声明，因为 grid-template-columns 不在 :has() 支持的“可动画/可响应属性”列表中（CSS WG 明确排除布局属性）。
真正能响应内容数量的方案只有 auto-fit + minmax()
如果你希望“子项越多，列数越多；子项越少，列数越少”，唯一可靠方式是放弃“按数量硬编码列数”，改用轨道生成机制：
-
repeat(auto-fit, minmax(240px, 1fr))—— 浏览器根据容器宽度和最小列宽，自动算出最多能塞几列，然后把空轨道收掉，让有内容的列拉伸填满 - 子元素数量只间接影响：如果只有 2 个子项，但容器够宽，依然会渲染 2 列（每列拉宽）；如果容器窄，可能压成 1 列——这是预期行为，不是 bug
- 不要试图用
:has(> :nth-child(6))去切 6 列样式，那只会造成维护黑洞，且在子项动态增删时完全失效
想精确控制列数？别靠内容数量，靠容器宽度或 JS 变量
所谓“根据内容数量”往往其实是“根据内容撑开后的容器宽度”或“后端返回的配置”。这时更务实的做法是：
- 用媒体查询按视口宽度分段：
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } } - 用 CSS 变量配合 JS：
.grid { grid-template-columns: repeat(var(--cols), 1fr); }，再由 JS 根据实际子元素数量或业务逻辑设置--cols - 服务端渲染时直接输出列数类名：，避免前端猜数量
真正难的不是语法，而是接受：CSS Grid 的列数是容器驱动的，不是 DOM 子节点数量驱动的。强行用
:has()绑定数量，等于在对抗浏览器的布局模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
