repeat()生成的轨道数严格按参数执行：数字参数固定建轨，auto-fill保留所有可能空轨道，auto-fit则丢弃空轨道并拉伸有内容的列；二者均需搭配minmax()才生效。
repeat() 生成的轨道数是严格按第一个参数来的
很多人以为 repeat(3, 1fr) 是“把容器三等分”，其实它只是建了 3 条轨道，每条都是 1fr。如果父容器宽度只有 200px，而你写了 repeat(4, 100px)，那第 4 条轨道大概率被挤出视口——不是函数失效，是容器装不下。
常见错误现象：grid-template-columns: repeat(5, 1fr) 在小屏上列宽缩成几像素、点不到内容；或者 repeat(3, 200px) 看起来只显示 2 列，其实是第三列在右侧溢出，没设 overflow: auto 或 min-width 就看不见。
- 要确保列能自适应，别单独用固定值，优先搭配
minmax() - 明确需要几列就写几列，别指望
repeat(3, 1fr)在窄屏下自动变成 1 列——它不会变 - 调试时可临时加
outline: 1px solid red到网格项，确认轨道是否真被渲染出来
auto-fit 和 auto-fill 的行为差异很关键
auto-fit 和 auto-fill 都得和 minmax() 搭配才有意义，单独写 repeat(auto-fit, 1fr) 浏览器直接忽略整条声明。
区别在于空轨道处理方式：auto-fill 强制预留所有可能槽位（哪怕没内容），auto-fit 则会收掉空轨道，把空间分给有内容的列。
- 做响应式卡片列表，用
repeat(auto-fit, minmax(250px, 1fr)))，卡片会自动铺满整行 - 做可拖拽布局或表单占位格，才选
auto-fill，比如必须显示 6 个输入框位置，哪怕只填了 2 个 - Safari 10.0 及更早版本不支持
auto-fit，只认auto-fill，上线前得查兼容性
嵌套 repeat 和混用轨道需注意空格与顺序
repeat() 是轨道列表的一部分，不是独立属性。它前后加其他轨道定义时，必须用空格分隔，不能加逗号，也不能错位括号。
错误写法：grid-template-columns: repeat(2, 1fr), 20px, repeat(2, 1fr) → 整条声明被浏览器丢弃；repeat(2, 1fr 20px) → 实际生成 4 列（1fr 20px 1fr 20px），中间那个 20px 被当成列宽，不是 gap。
- 想在两组弹性列之间插一列固定宽间隙，正确写法是：
repeat(2, 1fr) 20px repeat(2, 1fr) - 周期性模式如“1fr 2fr 1fr 2fr”用
repeat(2, 1fr 2fr)，不是repeat(2, 1fr) repeat(2, 2fr) - 嵌套如
repeat(3, repeat(2, 1fr 2fr))展开后是 12 条轨道，手写容易出错，适合结构高度规律的场景
grid-template-rows 用 repeat 后行高“看不见”怎么办
repeat(3, 200px) 确实建了 3 行，但 Grid 行默认由内容撑开。如果某行没子元素，或子元素没设高度，那行就“隐形”了——不是没创建，是没显形。
常见错误现象：写了 grid-template-rows: repeat(3, 100px)，但第三行背景色没显示，检查发现里面没放任何元素，也没设 min-height。
- 最直接办法：给每个网格项设
min-height: 100%或height: 100% - 更灵活方案：配合
grid-auto-rows: 100px，它对隐式行生效，适合内容动态增减的场景（如列表加载更多） - IE 完全不支持
repeat()，包括repeat(3, 1fr)和所有带关键字的写法；Edge 16+ 支持基础数字版，但不支持auto-fit/auto-fill
实际项目里最容易被忽略的，是把 repeat() 当成“智能分配”工具——它只是展开器，不参与布局决策。真正决定怎么排、怎么换行、怎么拉伸的，是 minmax()、gap、justify-content 这些配套规则。写完 repeat 后，一定要连着看一眼容器尺寸、子项内容和 display 行为，否则很容易卡在“明明写了却没效果”的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
