repeat() 是语法糖，非函数调用，正确写法为 repeat(3, 1fr) 或 repeat(2, 1fr 2fr)，逗号后需空格，多轨道用空格分隔；不支持变量、嵌套表达式及 grid-template-areas；auto-fit 收缩空列，auto-fill 保留空列；IE 不支持，CSS 变量支持有限。
grid-template-columns 里 repeat() 怎么写才不翻车
直接说结论：repeat() 是 grid-template-columns 和 grid-template-rows 的语法糖，不是函数调用，不能传变量、不能嵌套表达式，写错格式会整个声明失效，浏览器直接忽略该行。
常见错误是当成 JS 函数写成 repeat(3, 1fr) 或 repeat(2, 1fr 2fr) 却漏了括号内必须用空格分隔——正确写法是 repeat(3, 1fr)（注意逗号后有空格），而多轨道模式必须写成 repeat(2, 1fr 2fr)（中间是空格，不是逗号）。
-
repeat(3, 1fr)→ 等价于1fr 1fr 1fr -
repeat(2, 1fr 2fr)→ 等价于1fr 2fr 1fr 2fr（重复的是整个“轨道组”） -
repeat(auto-fit, minmax(200px, 1fr)))是响应式常用写法，注意minmax()里不能出现单位混用（如minmax(10rem, 1fr)合法，minmax(10px, 1fr)也合法，但minmax(10, 1fr)缺单位就无效）
grid-template-areas 配合 repeat() 有用吗
没用。grid-template-areas 只接受字符串字面量，比如 "header header" "main sidebar"，repeat() 在这里完全不生效。想动态生成区域布局，只能靠 JS 拼字符串再设 style.gridTemplateAreas，CSS 本身不支持。
如果你看到别人写了类似 grid-template-areas: repeat(2, "header") —— 这是无效 CSS，浏览器会静默丢弃整条声明。
立即学习“前端免费学习笔记（深入）”；
repeat(auto-fill) 和 auto-fit 的区别在哪
两者都用于配合 minmax() 实现流式列数，但行为关键不同：
-
auto-fill：尽可能多地渲染轨道（哪怕内容为空），剩余空间均分给所有列 -
auto-fit：渲染完有内容的轨道后，把空轨道收缩为 0，剩余空间全分给有内容的列
实际效果差异明显：用 auto-fit 更贴近“自适应卡片列表”的直觉；用 auto-fill 则适合需要占满容器、留白均匀的场景（比如表单栅格）。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
这行代码会让容器内每列至少 250px，列数随容器宽度自动增减，且空列不占空间——多数响应式布局选它就够了。
IE 兼容时 repeat() 能用吗
不能。IE 完全不支持 repeat()，连带整个 grid-template-columns 声明都会被忽略（除非你写了降级的非 Grid 布局）。如果项目还要兼容 IE11，要么放弃 repeat() 改用手写轨道（如 1fr 1fr 1fr），要么用 Autoprefixer + postcss-grid-kiss 等工具转译，但后者也不能覆盖所有 repeat(auto-fit) 场景。
更现实的做法是：对 IE 单独写一套 display: flex 或 float 降级，然后用 @supports (display: grid) 把带 repeat() 的 Grid 规则包起来，确保只在支持的浏览器中生效。
容易被忽略的一点：即使现代浏览器，repeat() 中的值如果含 CSS 变量（如 repeat(var(--cols), 1fr)），目前只有 Firefox 和 Safari 支持，Chrome 直到 v123 才开始部分支持——别默认它能跑通。
