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。立即学习“前端免费学习笔记深入” 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。