repeat()是定义重复网格轨道的唯一合理写法；不用它会导致grid-template-columns/rows难以维护，其失效主因是上下文错误（如未设display: grid）、误用位置（如用于grid-column）或语法误置（如在grid-template-areas中）。
直接说结论：repeat()不是“可选技巧”，而是定义重复网格轨道的唯一合理写法；不用它，grid-template-columns和grid-template-rows很快就会变成难以维护、极易出错的手动拼接字符串。
为什么repeat()写出来却没效果
绝大多数失效跟语法无关，是上下文或位置错了：
- 没给容器设
display: grid或display: inline-grid——repeat()只在网格上下文中生效，普通div里写等于白写 - 误用在子项属性上，比如
grid-column: repeat(2, 1fr)——repeat()只能用于grid-template-columns、grid-template-rows或简写的grid-template，不能用于定位类属性 - 写在
grid-template-areas里，例如grid-template-areas: repeat(2, "header")——该属性只接受字符串字面量，浏览器会静默丢弃整条声明 - 内联样式中漏掉
display: grid，只写了style="grid-template-columns: repeat(3, 1fr)"——CSS引擎直接忽略该声明
调试时看开发者工具的 Computed 面板，如果grid-template-columns显示为空或invalid value，基本就是上述某一条出了问题。
repeat(3, 1fr)和repeat(2, 1fr 2fr)的区别
第二个参数是「轨道列表」，不是单个值；理解这点才能避免结构错位：
-
repeat(3, 1fr)→ 展开为1fr 1fr 1fr（3列） -
repeat(2, 1fr 2fr)→ 展开为1fr 2fr 1fr 2fr（4列，每组2列循环） -
repeat(3, 200px 1fr)→ 展开为200px 1fr 200px 1fr 200px 1fr（6列）
常见错误是以为repeat(3, 1fr 2fr)生成3列，结果布局整体偏移。检查展开逻辑最简单：复制到控制台用getComputedStyle(el).gridTemplateColumns看实际解析值。
响应式列数必须用repeat(auto-fit, minmax())
手写媒体查询适配不同屏幕列数，维护成本高且容易漏断点；一行repeat()就能替代整套逻辑：
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))——推荐多数卡片/列表场景，空列会被收缩，非空项目自动拉伸填满 -
repeat(auto-fill, minmax(250px, 1fr))——适合需要固定栅格背景或相册布局，即使没内容也会保留轨道 -
minmax()里单位必须完整，minmax(10, 1fr)无效，minmax(10px, 1fr)或minmax(1rem, 1fr)才合法 - 父容器若无明确宽度（如
width: auto且无约束），auto-fit计算可能不稳定——加width: 100%或限制max-width能缓解
卡片高度不一致时，默认align-items: stretch会让所有行等高，视觉错乱；记得加align-items: start。
嵌套写法比拼接更安全但别过深
复杂布局中嵌套repeat()能明确结构意图，降低修改成本：
-
grid-template-columns: 200px repeat(3, 1fr) 80px——左侧固定、中间弹性列组、右侧固定，改列数只需调repeat(4, 1fr)，不动首尾 -
repeat(2, 100px repeat(3, 1fr))——两组「100px + 3列弹性」，适合仪表盘模块复用 - 超过两层嵌套（如
repeat(2, 100px repeat(3, 1fr 2fr))）可读性骤降，建议拆成CSS自定义属性或加注释说明
真正容易被忽略的是：IE完全不支持repeat()，而CSS变量在repeat()中无法使用——想动态控制列数，只能靠JS注入style.gridTemplateColumns。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
