先记住这个答案
repeat() 把轨道模式展开成一串列或行，例如 repeat(3, 1fr) 就是三条等宽列；repeat(2, 100px 1fr) 会把“固定列加弹性列”重复两遍。卡片数量和容器宽度不固定时，可用 repeat(auto-fit, minmax(200px, 1fr))：能放几列就放几列，剩余空间由各列分摊。它只定义轨道，不负责生成内容。
repeat(3, 1fr)生成三条等宽列- 第二个参数可以是一组轨道
auto-fit会折叠空轨道minmax()可限制列的最小尺寸
固定重复与模式重复
先看最常见的三列卡片。三条 1fr 轨道会分摊网格容器可用空间；如果容器设了 gap，会先扣掉间距再分配。第二个参数也可写多条轨道，于是奇偶列就能形成固定的节奏。
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pattern { display: grid; grid-template-columns: repeat(2, 120px 1fr); }.three 生成三列；.pattern 实际生成四列，依次是 120px 1fr 120px 1fr。这里的 minmax(0, 1fr) 允许列收缩，避免长单词或大图片把弹性列撑破。
固定列数适合设计稿明确给出列数的区域。窗口缩小时还要配合断点，否则三列即便很窄也不会自动变成两列。
卡片数量变化时用自动重复
商品列表的容器可能在主内容区，也可能在窄侧栏，固定写三列很难复用。auto-fit 根据容器可容纳的轨道数生成列；与 minmax() 一起使用时，每列先保证可读的下限，再把多余宽度分掉。
auto-fill 也会尽量生成能装下的轨道，但即使没有项目填入，空轨道也会保留。auto-fit 会折叠这些空轨道，因此少量卡片时已有卡片能伸展。二者在项目足够多、轨道都占满时看起来往往一样。
自动重复有个实用边界：repeat(auto-fit, minmax(200px, 1fr)) 的 200px 是每列的最低目标，不是“容器再窄也不会溢出”的保证。如果组件本身只有 180px 宽，最小列仍会比容器宽。需要允许特别窄的嵌入位置时，可以把下限写成 min(100%, 200px) 再交给 minmax()；同时检查图片和长链接是否也能缩小。
容易答错的地方
- 以为
repeat()会重复卡片 - 它只改网格容器的轨道定义。DOM 里有几张卡仍由 HTML 或数据决定；项目多于显式轨道时会出现隐式行。
- 认为
1fr一定不会溢出 - 轨道的自动最小尺寸可能受长内容影响。需要可收缩列时可写
minmax(0, 1fr)，项目内部也可能需要min-width: 0。
面试官还会怎么问？
auto-fill 和 auto-fit 何时看出差异？
容器够宽而项目数量很少时最明显。auto-fill 留着空列，auto-fit 折叠空列并让有内容的列伸展。
能在 repeat(auto-fit, ...) 里直接用 1fr 吗？
自动重复需要可确定的轨道尺寸来算容纳数量，通常写 minmax(某个长度, 1fr)，给列一个明确下限。
多出来的卡片放哪儿？
列轨道固定后，自动放置会继续创建隐式行。行高由 grid-auto-rows 或内容决定。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。