repeat() 是语法糖，真正起作用的是其展开后的轨道定义；直接写 repeat(3, 200px) 易导致溢出或响应失效，需配合 minmax()、auto-fit/auto-fill 及 gap 等合理使用。
repeat() 为什么不能直接写 repeat(3, 200px) 就完事？
因为 repeat() 只是语法糖，它本身不决定网格行为——真正起作用的是它展开后的轨道定义。比如 repeat(3, 200px) 等价于 200px 200px 200px，但如果你把它塞进 grid-template-columns 却忘了留空隙或响应式余地，列一多就溢出容器。
常见错误现象：display: grid 容器宽度固定，但子项内容撑宽后网格列没自适应，出现横向滚动；或者用 repeat(5, 1fr) 在小屏上挤成一条缝，根本点不到。
- 使用场景：适合列数明确且尺寸一致的布局，比如仪表盘卡片栅格、表头固定列、图库缩略图行
- 参数差异：
repeat(auto-fit, minmax(200px, 1fr)))比repeat(3, 1fr)更健壮，前者会根据容器宽度自动删减列数，后者死守3列 - 性能影响：纯数值重复（如
repeat(12, 1fr)）无运行时开销；但带minmax()和auto-fit的组合，浏览器需在每次尺寸变化时重新计算轨道，频繁 resize 下略有压力
auto-fill 和 auto-fit 看起来一样，实际效果差很远
auto-fill 会为所有可能容纳的轨道预留空间（哪怕没内容），auto-fit 则会把空轨道“收掉”，把剩余空间分给有内容的列。这是最常被忽略的兼容性细节。
错误现象：用 repeat(auto-fill, minmax(150px, 1fr))) 布局卡片，结果右侧大片空白；换成 auto-fit 后卡片立刻均匀铺满整行。
立即学习“前端免费学习笔记（深入）”；
- 使用场景：
auto-fit更适合内容动态增减的列表（如搜索结果、用户相册）；auto-fill适合需要预留槽位的场景（如可拖拽布局的占位格） - 兼容性：两者在 Chrome 57+、Firefox 52+、Safari 10.1+ 均支持，但 Safari 10.0 及更早版本不支持
auto-fit，只认auto-fill - 别硬套：如果明确只要3列，就别用
auto-fit—— 它在窄屏下可能缩成1列，破坏设计预期
和 grid-template-columns 搭配时，repeat() 前后不能随便加单位或函数
repeat() 是轨道列表的一部分，不是独立样式属性。它前后如果混用绝对单位、fr 或 minmax()，必须用空格分隔，且不能有逗号或括号嵌套错位。
错误现象：grid-template-columns: repeat(2, 1fr) 20px repeat(2, 1fr) 写成 repeat(2, 1fr), 20px, repeat(2, 1fr)，浏览器直接忽略整条声明；或者写成 repeat(2, 1fr 20px)，结果每列后面都强行加了20px间隙，实际变成4列。
- 正确写法示例：
grid-template-columns: repeat(2, 1fr) 20px repeat(2, 1fr)（中间的20px是单独一列轨道） - 想加间隙？用
gap属性，别塞进repeat()里 - 想让某列不同？拆开写：
grid-template-columns: 1fr repeat(3, 200px) 1fr，而不是试图在repeat()内部做条件判断
移动端适配时，别只靠 repeat() 自动响应
repeat() 本身没有媒体查询能力，所谓“响应式”全靠它内部的 minmax() 和容器尺寸联动。一旦父容器没设 width: 100% 或被 flex 压缩，整个计算就失效。
错误现象：在 display: flex 的卡片容器里用 repeat(auto-fit, minmax(120px, 1fr)))，结果始终只显示1列——因为 flex 默认不给子项分配宽度，grid 容器算不出可用空间。
- 必须检查父级是否限制了宽度，尤其是嵌套在
flex或inline-block中时 - 安全写法：给 grid 容器加
width: 100%或min-width: 0（解决 flex shrink 问题） - 复杂布局建议分层：外层用媒体查询切列数（
repeat(2, 1fr)/repeat(4, 1fr)），内层再用minmax()微调单列弹性，比全压给一个repeat()更可控
真正麻烦的不是怎么写 repeat()，而是它展开后和其他轨道、父容器、书写模式之间的隐式耦合——改一行，三处崩。动手前先用浏览器开发者工具的网格叠加层看一眼实际轨道线，比猜强得多。
