用 repeat() 是为避免手动拼接轨道时的低级错误；它生成指定数量的独立轨道，支持多值和嵌套，但需注意 auto-fit 与 auto-fill 行为差异及容器尺寸约束。
直接说结论：用 repeat() 不是为了“少写几行”，而是避免手动拼接轨道时漏空格、多逗号、单位错位、数错数量这些低级但高频的错误。
repeat(数字, 轨道列表) 是最常用也最容易写错的写法
很多人把 repeat(3, 1fr) 理解成“三等分”，其实它生成的是「3 条独立轨道」，每条都是 1fr；这和手写 1fr 1fr 1fr 完全等价，只是更可靠。
- 写
repeat(4, 150px)就是 4 列，每列固定 150px —— 如果容器太窄，浏览器会压缩或隐藏超出部分，不是函数失效，而是你没设min-width或处理溢出 -
repeat(2, 1fr 2fr)展开后是1fr 2fr 1fr 2fr（共 4 列），不是 2 列；误写成repeat(2, 1fr) 2fr就会变成 2 列 + 一个孤立的2fr，结构直接偏移 - 第二个参数叫「轨道列表」，可以是多个值：
repeat(3, 100px 1fr)→ 6 列；不能加多余逗号，repeat(3, 1fr, 1fr)是语法错误
auto-fit 和 auto-fill 在响应式卡片布局里表现完全不同
写 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是现代卡片墙的标准解法，但它和 auto-fill 的行为差异直接影响视觉效果。
-
auto-fit：尽可能填满容器，然后把所有非空轨道拉伸占满剩余空间，不留空白列 —— 卡片高度不一时，必须配align-items: start，否则默认stretch会让短卡片被拉高错位 -
auto-fill：不管有没有内容，只要空间够就创建轨道，空轨道也会保留 —— 适合做背景栅格、固定占位的相册页，但卡片墙用了会看到大片留白 - 两者都动态计算轨道数，但数量不是“估算”，而是严格按
minmax()的最小值和容器宽度推导；比如容器宽 700px，minmax(250px, 1fr)最多放 2 列（2×250=500 ≤ 700），第三列放不下就换行
嵌套 repeat() 能提升复杂布局可读性，但有实际限制
像「左侧边栏 + 三列主区 + 右侧工具栏」这种结构，用 repeat() 组合比硬写更易维护，但别指望它能无限嵌套。
- 推荐写法：
grid-template-columns: 200px repeat(3, 1fr) 80px—— 意图清晰：固定-弹性-固定；改列数只需动repeat(4, 1fr)，首尾不动 - 支持两层嵌套，例如：
repeat(2, 100px repeat(3, 1fr))→ 先重复 2 组「100px + 3列弹性」，共 8 列；三层以上建议拆成 CSS 自定义属性或加注释，否则调试时一眼看不出轨道总数 - 命名轨道线可配合使用：
[start] repeat(4, [col] 1fr [gap]) [end]，方便后续用grid-column: col / gap精确定位，但别为了命名牺牲可读性
真正容易被忽略的点是：所有 repeat() 行为都依赖父容器的实际渲染尺寸，而不是你写的数值。调试时如果轨道没如预期出现，先检查容器是否有 width、min-width、overflow 或是否被 flex/grid 父级约束了尺寸 —— 这些问题比函数本身难排查得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
