repeat() 的第一个参数必须是字面量数字，不能是 css 变量；动态控制行高应使用 grid-auto-rows: minmax(var(--row-min-height), auto)，列数自适应推荐 auto-fit + minmax()。
为什么 grid-template-rows: repeat(var(--rows), 1fr) 总是不生效
这不是浏览器兼容问题，而是 CSS 规范明确禁止——repeat() 的第一个参数必须是字面量数字（如 4），不能是 CSS 变量。哪怕你写了 --rows: 4，repeat(var(--rows), 1fr) 也会被浏览器静默丢弃，Computed 面板里 grid-template-rows 显示为空或 initial。
常见错误包括：
-
--rows: "4"（带引号，变成字符串） -
--rows: 4px（带单位） -
--rows: 4.0（小数，非整数字面量）
所有这些写法都会让整条声明失效。别指望 @property 或未来特性绕过——目前所有主流浏览器均未支持。
grid-auto-rows 和 gap 是变量真正能用的地方
想动态控制行高，唯一可靠且广泛支持的路径是作用于隐式行（即内容超出预设行数时自动创建的行），用 grid-auto-rows 配合 minmax()：
-
grid-auto-rows: minmax(var(--row-min-height), auto)✅ 安全，Chrome/Firefox/Edge/Safari 14.1+ 均支持 -
--row-min-height: 60px必须带单位，--row-min-height: 60❌ 无效 -
gap: var(--gap)同样需带单位，建议拆成row-gap: var(--row-gap)和column-gap: var(--col-gap)更稳妥 - IE11 完全不支持以上任何用法，需用
@supports (display: grid)包裹降级样式
列宽可以用 minmax() + 变量实现弹性自适应
如果你要的是“根据容器宽度自动适配列数”，而不是“精确等于 N 列”，就别碰 repeat(var(--cols), ...) —— 直接用 auto-fit + minmax()：
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)))-
--col-min-width: 240px控制每列最小宽度，变量可由 JS 或媒体查询动态修改 - 该写法在窄屏下自动换行，宽屏下拉伸填满，无需 JS 干预，语义清晰且性能好
- 避免写成
minmax(240px, 240px)（等于固定宽）或minmax(240px, max-content)（可能撑破容器）
真要精确控制“N 行”或“N 列”，JS 是唯一靠谱方案
比如画布网格（16×16、32×32），要求单元格严格等分固定容器尺寸，就必须 JS 动态拼接轨道定义：
- 确保变量作用域对齐：在目标容器上定义
--rows，而非只挂:root - 读取并转为整数：
const n = parseInt(getComputedStyle(el).getPropertyValue('--rows').trim()) - 写入合法值：
el.style.gridTemplateRows = `repeat(${n}, minmax(0, 1fr))`（加minmax(0, 1fr)防窄屏压缩） - 高频触发（如 resize）慎用：每次设置都触发重排，Grid 计算成本高于 Flex
真正容易被忽略的不是语法怎么写，而是混淆了“显式行”和“隐式行”的管理边界——grid-template-rows 只管手写的那几行，动态追加的内容走的是 grid-auto-rows。写错地方，变量再对也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
