repeat()不支持嵌套，如repeat(2, repeat(3, 1fr))会直接报语法错误并静默丢弃整条grid-template-columns声明；必须扁平化表达，如改用repeat(6, 1fr)或repeat(2, 1fr 1fr 1fr)。
repeat() 里不能再套 repeat()
浏览器根本不支持嵌套写法，比如 repeat(2, repeat(3, 1fr)) 或 repeat(2, repeat(3, minmax(200px, 1fr))))，解析时直接当语法错误处理，整条 grid-template-columns 声明被静默丢弃——你看到的“网格没了”“内容回退到块流”，八成就是这个原因。
repeat() 的作用是展开轨道列表，它本身不是容器函数，没有层级概念。所有轨道定义必须扁平化表达。
- 错误写法：
grid-template-columns: repeat(2, repeat(3, 1fr)) - 正确写法：
grid-template-columns: repeat(6, 1fr)（手动算好总列数）或grid-template-columns: repeat(2, 1fr 1fr 1fr)（重复一个含三列的模式） - 更健壮的替代：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，让浏览器自动算列数，避免硬编码
单位混用导致整行声明失效
repeat() 括号内如果混用不同单位（比如 100px 和 1fr），浏览器会立刻报语法错误，并丢弃整条 grid-template-columns 声明——不是只忽略 repeat 部分，而是整个属性失效，退回到文档流布局。
常见错误场景：想实现「两个固定宽列 + 一个弹性列」，却写成 repeat(2, 100px 1fr)；或者误把 gap 当作轨道写进 repeat，如 repeat(3, 1fr 20px)。
- 错误：
grid-template-columns: repeat(2, 100px 1fr)→ 解析失败 - 正确：
grid-template-columns: repeat(2, 100px) 1fr（固定列先写，弹性列单独放后面） - 也合法：
grid-template-columns: repeat(2, 1fr 2fr)（因为1fr 2fr是一组同类型轨道，单位统一） - gap 要用
gap、column-gap单独设，不能塞进 repeat
auto-fit 和 auto-fill 写错位置就没效果
auto-fit 和 auto-fill 必须作为 repeat() 的第一个参数，且第二个参数**必须是 minmax()**。写成 repeat(auto-fit, 1fr) 或 repeat(auto-fill, 200px) 不报错，但浏览器无法推导最小尺寸，结果常表现为只渲染一列或全部挤成一团。
这是最隐蔽的“看起来没变化”类问题——样式面板里值还在，但布局完全不对。
- 错误：
repeat(auto-fit, 1fr)、repeat(auto-fill, 200px) - 正确：
repeat(auto-fit, minmax(250px, 1fr)) - 区别要点：
auto-fit会收缩空轨道，把空间分给有内容的列；auto-fill会预留所有可能槽位，容易右侧留白 - Safari 10.0 及更早不支持
auto-fit，只认auto-fill，需用@supports降级
CSS 变量不能当 repeat() 第一个参数
repeat(var(--cols), 1fr) 在所有浏览器中都无效，不是兼容性问题，而是 CSS 规范硬性禁止：repeat() 的重复次数必须是字面量数字（如 3）或已计算完成的值，var() 只做字符串替换，不会参与数值求值。
开发者工具的 Computed 面板里如果 grid-template-columns 显示为空或 initial，基本可以锁定是这个原因。
- 变量可用的地方：
minmax(var(--min-width), 1fr)、gap: var(--gap)、width: calc(var(--gap) * 2) - 想动态控列数？只能 JS：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`，其中n是从getComputedStyle读出并parseInt()后的数字 - 注意：高频设置会触发重排，Grid 计算比 Flex 重，别在 scroll 或 resize 里直接改
真正难的不是写对 repeat，而是意识到它只是语法糖——背后每一条轨道都会参与布局计算，任何单位错位、括号失衡、参数越界，都会让整条声明归零。浏览器不报错，只沉默丢弃，这点最容易让人花半天查 DOM 结构而不是看 CSS 语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
