repeat()第二个参数是轨道列表而非单个轨道，如repeat(2,1fr 2fr)生成4列；auto-fit会合并空轨道，auto-fill则保留空轨道；单位混用或嵌套repeat()会导致整条声明静默失效；css变量不能用于repeat()第一个参数。
repeat() 里写了数字，但实际列数翻倍了
这不是浏览器 bug，而是对 repeat() 第二个参数理解偏差导致的。它接收的是「轨道列表」，不是单个轨道值。比如 repeat(2, 1fr 2fr) 会生成 1fr 2fr 1fr 2fr —— 共 4 列，不是 2 列。
- 常见错误：
grid-template-columns: repeat(3, 1fr 1fr)→ 实际 6 列 - 想实现「3 组 [固定+弹性]」，应写
repeat(3, 150px 1fr)，而非repeat(3, 150px) repeat(3, 1fr)（后者语法错误） - 用开发者工具检查 computed 样式里的
grid-template-columns值，能直接看到展开后的轨道序列
auto-fit 和 auto-fill 混用导致“列数忽多忽少”
auto-fit 和 auto-fill 都会动态生成轨道，但行为完全不同：前者在内容不足时会合并空轨道并拉伸有内容的列；后者则强制铺满所有可能轨道，哪怕对应位置没子元素——这些空轨道仍参与布局计算，视觉上“消失”，但 DOM 和 layout 中真实存在。
- 现象：子项只有 2 个，却看到 5 列间距、大量留白 → 很可能是用了
auto-fill - 响应式卡片墙首选
repeat(auto-fit, minmax(250px, 1fr))，auto-fill更适合预设槽位场景（如表单固定 6 行） - 两者都必须搭配
minmax()才生效；repeat(auto-fit, 1fr)不报错但几乎无效
单位混用或语法错误让整条声明静默失效
CSS Grid 对 grid-template-columns 的语法极其敏感。只要 repeat() 内部出现单位不一致、嵌套函数或非法值，整条声明会被浏览器直接丢弃，退回到文档流布局——你看到的“列数变少”“网格没了”，其实是整个属性没生效。
- 错误：
repeat(2, 100px 1fr)→ 单位混用，解析失败，整行丢弃 - 错误：
repeat(2, repeat(3, 1fr))→ 嵌套repeat()不被支持，静默忽略 - 正确写法：
repeat(2, 100px) 1fr或repeat(2, 1fr 2fr)（单位统一） - 检查方式：打开开发者工具，在 Styles 面板看该属性是否被划掉；Computed 面板若为空，基本就是语法问题
变量传入 repeat() 的第一个参数根本不会生效
repeat(var(--cols), 1fr) 在所有现代浏览器中都会被当作无效值处理，不是兼容性问题，而是 CSS 规范明确禁止变量作为重复次数。浏览器只做字符串替换，不执行表达式求值，var(--cols) 不会被解析为数字。
- 现象：明明设置了
--cols: 4，但始终只显示 1 列 → 就是这个原因 - 可行替代：
grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr))（变量用在minmax()内） - 真要精确控制 N 列，只能用 JS 动态设置：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)` - 注意：JS 设置后需确保容器重排触发，避免因缓存导致样式未更新
repeat() 本身出问题，而是轨道定义没扁平化、auto-fit/auto-fill 行为被误读、或语法错误导致整条声明被静默丢弃——这些细节一旦漏掉，调试时就会陷入“明明写了却不起作用”的循环。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
