repeat() 是 grid-template-columns/rows 的语法糖，非函数调用，不执行计算、不支持变量与嵌套，格式错误（如空格缺失、括号不匹配）会导致整行声明被静默忽略；auto-fill 保留空列并均分剩余空间，auto-fit 收缩空列为0并将空间全分给有内容的列；不可用于 grid-template-areas；IE11 完全不支持，且无法被转译兜底。
repeat() 是 grid-template-columns/rows 的语法糖，不是函数调用
它不执行计算、不接受变量、不能嵌套，写错格式（比如漏空格或括号不匹配）会导致整行声明被浏览器静默忽略——你改了但页面毫无反应，往往就是这原因。
-
repeat(3, 1fr)✅ 正确：逗号后必须有空格，等价于1fr 1fr 1fr -
repeat(2, 1fr 2fr)✅ 正确：重复的是“整个轨道组”，结果是1fr 2fr 1fr 2fr -
repeat(2, 1fr, 2fr)❌ 错误：多了一个逗号，语法非法 -
repeat(2, repeat(3, 1fr))❌ 错误：嵌套不支持
固定数量 vs 自适应列数：auto-fill 和 auto-fit 的行为差异很关键
多数人以为两者只是“填满”和“适配”的文字差别，实际渲染效果截然不同——尤其在卡片类布局中，选错会直接导致留白失控或内容被挤压。
-
repeat(auto-fill, minmax(250px, 1fr))：强行生成所有可能列，空列仍占位，剩余空间均分。适合表单栅格等需严格对齐的场景。 -
repeat(auto-fit, minmax(250px, 1fr))：只保留有内容的列，空列收缩为 0，剩余空间全分给现有列。更符合“响应式卡片列表”的直觉，推荐作为默认选择。 - 测试技巧：往容器里塞少于最大列数的子元素，对比两者空白区域是否消失，就能立刻验证行为。
repeat() 可以混合使用，但不能用于 grid-template-areas
你可以在 grid-template-columns 里写 200px repeat(3, 1fr) 80px，也能在 grid-template-rows 中写 repeat(2, 60px 10px) 100px，但千万别试图在 grid-template-areas 里用它。
-
grid-template-areas: "header header" "main sidebar"✅ 合法 -
grid-template-areas: repeat(2, "header")❌ 无效 CSS，整条声明被丢弃，控制台无报错 - 想动态生成区域名？只能靠 JS 拼字符串再赋值给
element.style.gridTemplateAreas。
IE 兼容性是硬伤，别指望转译能兜底
IE11 完全不识别 repeat()，连带整个 grid-template-columns 声明都会被忽略——即使你写了降级样式，也得确保 fallback 不依赖 Grid。
立即学习“前端免费学习笔记（深入）”；
- Autoprefixer 或
postcss-grid-kiss无法转译auto-fit或嵌套minmax()等现代用法 - 若必须兼容 IE，要么手写冗长轨道（如
1fr 1fr 1fr），要么改用 Flexbox 或 float 降级方案 - 现代项目建议明确放弃 IE 支持，避免为边缘场景增加维护负担
repeat() 对空格和括号层级的敏感度——它看着像 JS 函数，实则是 CSS 解析器严格按文法匹配的声明片段。一个空格写错，整行就失效，而浏览器既不报错也不提示，排查时很容易绕远路。 
