repeat() 函数怎么写才不报错
直接写 repeat(3, 1fr) 是最常见也最容易出错的起点。很多人复制示例后发现网格没生效，其实是漏了两个关键前提：它只能用在 grid-template-columns 或 grid-template-rows 里，且必须配合其他轨道值一起使用（除非你只想要重复轨道）。
- 错误写法：
grid-template: repeat(3, 1fr) / repeat(2, 1fr);——grid-template不接受纯repeat()，会静默失败 - 正确写法：
grid-template-columns: repeat(3, 1fr);或grid-template-columns: 200px repeat(2, 1fr) 100px; -
repeat()的第一个参数必须是正整数，repeat(0, 1fr)或repeat(-1, 1fr)会导致整个声明被浏览器丢弃
auto-fit 和 auto-fill 到底选哪个
当你要让列数随容器宽度自动变化时，repeat(auto-fit, minmax(200px, 1fr))) 和 repeat(auto-fill, minmax(200px, 1fr))) 看起来一样，但行为完全不同——这是最容易被忽略的兼容性陷阱。
-
auto-fill：不管有没有内容，都按最大可能数量生成轨道，空轨道仍占位（高度/宽度为 0，但存在） -
auto-fit：生成相同数量轨道后，会把空轨道“挤掉”，把空间分给有内容的列（即真正实现自适应） - 两者在 Safari 15.4 之前都不支持；Chrome/Firefox 支持良好，但旧版 Edge 完全不识别
auto-类型 - 别用
auto-fit配grid-auto-flow: column，容易触发渲染异常（尤其在动态增删子元素时）
repeat() 嵌套和计算函数怎么混用
repeat() 本身不能嵌套（比如 repeat(2, repeat(3, 1fr)) 是非法语法），但它可以和 calc()、minmax() 自由组合，这点常被低估。
- 合法：
grid-template-columns: repeat(3, calc(100% / 3 - 10px));—— 注意括号必须成对，calc()内部不能出现空格缺失（如100%/3-10px会解析失败） - 合法：
grid-template-columns: repeat(2, minmax(200px, 1fr)) 1fr;——minmax()是独立函数，不是repeat()的子功能 - 非法：
repeat(2, 1fr 2fr)—— 这想表达“两组 [1fr, 2fr]”，但语法上会被当作两个参数传入，报错 - 替代方案：
grid-template-columns: repeat(2, [start] 1fr [middle] 2fr [end]);（利用命名线绕过限制，但语义变重）
性能和 SSR 场景下的隐性问题
用 repeat() 定义几十列听起来很酷，但真这么干，会在某些场景下翻车。
立即学习“前端免费学习笔记（深入）”；
- CSS 解析本身很快，但 Chrome DevTools 的“Layout Shift”检测会对大量重复轨道产生误报（尤其搭配
grid-auto-flow: dense） - 服务端渲染（如 Next.js）中，若用 JS 动态拼接
repeat(n, ...)字符串，n 过大（>100）可能导致样式表体积激增，影响首屏加载 - 在
@media查询里频繁切换repeat()参数（比如从repeat(4, 1fr)切到repeat(12, 1fr)），某些安卓 WebView 会触发重绘卡顿 - 真正需要超多列时，优先考虑用
grid-template-columns: repeat(12, minmax(0, 1fr)));+grid-column: span 2控制合并，比硬写 12 条固定轨道更可控
重复轨道本身很简单，难的是判断“重复”是否真的解决了你的布局问题——有时候手动写三四个值，比套一层 repeat(auto-fit, ...) 更稳、更易调试。
