repeat()严格按参数生成轨道数：首参为重复次数，次参为轨道定义；如repeat(3,1fr)生成3条1fr轨道，非“三等分”。
repeat() 函数到底怎么算出轨道数量
直接说结论：repeat() 的第一个参数是重复次数，第二个参数是轨道定义；它不“推断”数量，而是严格按你写的次数生成对应数目的轨道。很多人误以为 repeat(3, 1fr) 是“分成三等份”，其实它是“创建三条轨道，每条都是 1fr”，最终容器里就有 3 列（或 3 行）。
常见错误现象：写了 grid-template-columns: repeat(4, 100px)，但实际只看到 2 列——大概率是父容器宽度不够，浏览器把超出部分的轨道折叠了（尤其在未设 min-width 或 overflow 时），不是 repeat() 失效。
-
repeat(2, 1fr 2fr)→ 生成 4 条轨道：1fr 2fr 1fr 2fr（重复 2 次，每次展开两个值） -
repeat(auto-fit, minmax(200px, 1fr)))→ 轨道数动态变化，取决于容器宽度，但最小不会少于 1 条 - 用
repeat(5, 1fr)和手写1fr 1fr 1fr 1fr 1fr效果完全一致，只是更简洁
auto-fit 和 auto-fill 在轨道数量上有什么实质区别
区别不在“数量上限”，而在“是否保留空轨道”。auto-fit 会把所有剩余空间分配给已渲染的轨道（挤掉空轨道）；auto-fill 则强制保留所有可能的轨道槽位（哪怕内容为空），导致空白列/行仍占位。
使用场景：做响应式卡片栅格时，用 auto-fit 更自然；做固定结构表单（比如必须显示 6 个输入框位置，哪怕某些没填），才选 auto-fill。
立即学习“前端免费学习笔记（深入）”；
- 两者都需搭配
minmax()才能生效，单独写repeat(auto-fit, 1fr)无效 -
auto-fit可能导致单个轨道撑满整行（当内容少时），这不是 bug，是设计行为 - 性能影响轻微，但
auto-fill在大容器中可能生成几十条空轨道，触发更多 layout 计算
为什么 grid-template-rows 用 repeat() 后高度不生效
因为行高默认由内容撑开，repeat(3, 200px) 确实建了 3 行，但如果里面没内容、或内容高度
常见错误现象：“写了 grid-template-rows: repeat(3, 200px)，但第三行根本看不见”，其实是第三行存在，只是背景/边框没设，内容又为空，视觉上“消失”了。
- 加
align-items: stretch（默认值）仅对有内容的子项起作用，空轨道依然不可见 - 要让空轨道显形，得给子元素设
min-height: 100%，或给网格项统一设height: 100% - 更稳妥的做法是配合
grid-auto-rows: 200px，它会对隐式行生效，适合内容动态增减的场景
兼容性陷阱：哪些老浏览器会把 repeat() 当成无效声明
IE 完全不支持 repeat()，包括 repeat(auto-fit, ...) 和所有带函数的写法；Edge 16+ 支持基础 repeat(n, ...)，但不支持 auto-fit/auto-fill。
容易被忽略的地方：Babel 或 Autoprefixer 不会转译 repeat()，它纯属 CSS 运行时解析，没 polyfill。上线前务必确认目标环境。
- Can I Use 显示 Chrome 57+/Firefox 52+ 支持标准
repeat(n, ...) -
repeat(auto-fit, ...)在 Safari 10.1+ 才开始支持，且早期版本有布局抖动问题 - 如果必须兼容 IE，只能回退到固定轨道数 + 媒体查询组合，或改用 JS 计算后写内联 style
repeat() 的数量控制很直白，但它的行为依赖于整个 Grid 上下文：容器尺寸、子项尺寸、对齐方式、甚至 display 类型。最容易漏掉的是“空轨道不可见”和“IE 彻底无视”，这两点卡住过太多人。
