repeat()仅在grid-template-columns/rows中配合display:grid生效；常用数字+单值（如repeat(4,1fr)）、数字+多值（如repeat(2,100px 20px 80px)）、auto-fit/auto-fill+minmax()实现响应式，禁用于子项定位属性。
repeat() 不是万能胶水，它只在 grid-template-columns 和 grid-template-rows 里起作用，且必须配合 display: grid 或 display: inline-grid 才会生效。写错位置、漏掉网格上下文，再对的参数也白搭。
怎么用数字 + 单值组合（最常用）
这是新手上手最快、也最容易写出 bug 的写法。比如 repeat(4, 1fr) 表示生成 4 条轨道，每条都占 1 份剩余空间；repeat(3, 200px) 就是 3 列固定宽。
- 别把
1fr当成“100%”，它是按比例分配的弹性单位，和容器总宽直接相关 - 写
repeat(5, 33.33%)很危险：百分比叠加gap后极易溢出，浏览器也不保证四舍五入一致 - 如果想让 3 列均分但留出左右边距，别硬凑百分比，改用
1fr 2fr 1fr或外层加 padding
怎么用数字 + 多值组合（交错布局关键）
repeat() 的第二个参数可以是多个轨道尺寸组成的列表，比如 repeat(2, 100px 20px 80px) 会生成 6 列：100px、20px、80px、100px、20px、80px。
- 这种写法适合图标栏、表头分组、带间隔的卡片序列等有规律的视觉节奏
- 注意不是“重复 2 次，每次 3 列”，而是“整个轨道列表重复 2 次”——总数 =
count × 轨道数 - 混用单位时要小心：例如
repeat(2, 1fr 100px)会交替出现弹性列和固定列，若容器太窄，1fr可能被压缩到 0
怎么用 auto-fit / auto-fill + minmax()（响应式核心）
真正让 repeat() 脱离“写死数量”的，是 auto-fit 和 minmax() 的组合，例如 repeat(auto-fit, minmax(250px, 1fr)))。
-
auto-fit会合并空轨道，内容少时列数自动减少，剩余空间由非空项拉伸填满 -
auto-fill则保留所有轨道（哪怕没子元素），适合做背景栅格或预留插槽 -
minmax(250px, 1fr)中的1fr是上限，不是目标宽度；实际列宽由容器总宽 ÷ 列数决定 - 父容器若没设
width或被浮动/绝对定位影响，auto-fit计算可能失准——这不是你代码错了，是上下文没约束住
怎么嵌套 repeat() 或混用其他轨道（复杂结构提效）
像 200px repeat(3, 1fr) 80px 这种写法，本质是把重复段当做一个“原子单元”插入整体轨道定义中。
- 嵌套两层以内足够清晰，例如
repeat(2, 100px repeat(3, 1fr))表示两组「100px + 3列弹性」 - 超过两层嵌套（比如
repeat(2, repeat(3, 1fr))）语法虽合法，但可读性骤降，建议改用 CSS 自定义属性或注释说明 - 不能把
repeat()放进grid-column或grid-area等子项属性里——它只负责定义网格线，不参与定位
真正难的从来不是记住 repeat() 有多少种参数，而是判断当前场景该用哪一种：固定数量？内容驱动？还是需要留空槽位？选错模式，后面所有样式调试都在对抗自己的前提假设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
