不能直接用--column-count变量控制grid-template-columns，因为repeat()第一个参数必须是整数字面量，不接受css变量；css变量是运行时字符串，无法参与样式解析阶段的数值计算。
为什么不能直接用--column-count变量控制grid-template-columns
很多人写@media (min-width: var(--breakpoint-md)) { .grid { grid-template-columns: repeat(var(--column-count), 1fr); } }，结果样式完全不生效——不是语法错，是repeat()第一个参数必须是整数字面量（如2、3），不接受var(--column-count)。浏览器解析到非数字值时会静默丢弃整条声明，DevTools里都看不到它被计算。
根本原因在于：repeat()是 CSS 函数，其参数在样式解析阶段就必须确定为有效数值；而 CSS 变量是运行时注入的字符串，无法参与该阶段的结构计算。
grid-template-columns必须在每个断点里显式重写
可行做法是把列数逻辑“编译”进媒体查询本身，而不是试图用变量驱动函数参数。变量只用于统一维护断点阈值，列数定义仍靠硬编码或预处理器展开。
- 移动端默认单列：
.grid { grid-template-columns: 1fr; } - 中屏两列：
@media (min-width: var(--breakpoint-md)) { .grid { grid-template-columns: repeat(2, 1fr); } } - 桌面三列：
@media (min-width: var(--breakpoint-lg)) { .grid { grid-template-columns: repeat(3, 1fr); } }
注意：--breakpoint-md和--breakpoint-lg可以是 CSS 变量，但repeat(2, ...)里的2必须是字面量。变量只管“什么时候切”，不管“切成几列”。
想动态列数？用auto-fit + minmax()替代断点
如果目标是让列数随容器宽度自动增减（比如小屏1列、中屏2列、大屏3列），repeat(auto-fit, minmax())才是原生解法，完全不用媒体查询：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
关键点：
-
minmax(280px, 1fr)定义每列最小宽度（280px）和弹性分配方式（剩余空间均分） -
auto-fit会收缩空轨道，确保内容填满整行 - 无需定义
--column-count变量，也无需手写多个@media - 兼容性好：Chrome 66+、Firefox 63+、Safari 14.1+、Edge 79+
用 JS 动态控制列数时，变量怎么设才可靠
如果必须由 JS 决定列数（比如根据用户偏好或数据量），别读getComputedStyle里的--column-count再塞进style.gridTemplateColumns——因为--column-count值是字符串"3"，需手动转数字，且无法保证单位/格式一致。
更稳妥的做法：
- JS 里直接存数字：
const columnCount = 3; - 用
style.gridTemplateColumns = `repeat(${columnCount}, 1fr)` - 若需同步到 CSS 变量供其他样式使用，再写
document.documentElement.style.setProperty('--column-count', columnCount)
容易被忽略的是：CSS 变量值始终是字符串，哪怕你设setProperty('--column-count', 3)，取出来也是"3"。任何依赖它做算术的地方（比如calc(var(--column-count) * 1rem)）都会失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
