应使用 repeat() 函数替代重复书写 1fr，如 repeat(4, 1fr)；配合 minmax() 实现响应式布局时优先选 auto-fit；避免在 repeat() 中混用单位导致列数误解。
重复写 1fr 多次是低效写法
当需要创建等宽列（比如 4 列均分）时，很多人会写成：grid-template-columns: 1fr 1fr 1fr 1fr。这不仅冗长，还容易数错个数、改起来麻烦。CSS 提供了 repeat() 函数专门解决这种重复模式。
repeat() 的三种常用写法和适用场景
repeat() 接收两个参数：重复次数（或关键词）和轨道大小。常见组合有：
-
repeat(4, 1fr)—— 明确重复 4 次，最常用 -
repeat(auto-fit, minmax(250px, 1fr)))—— 配合minmax()实现响应式自适应列数，容器缩小时自动减少列数 -
repeat(3, 100px 200px)—— 重复“100px 200px”这个组合 3 次，生成 6 列交替宽度
别在 repeat() 里混用不同单位导致布局断裂
下面这种写法看似省事，但实际无效：grid-template-columns: repeat(3, 1fr 200px)。它会生成 6 列（1fr 200px 1fr 200px 1fr 200px），而你可能本意是“每列都由 1fr + 200px 组成”，但 Grid 不支持这种“复合列”语义。若需固定间距+弹性内容，应该用 gap 或嵌套容器，而不是强行塞进 repeat()。
常见错误现象：grid-template-columns: repeat(2, 1fr 2fr) 看似想建两组“1fr+2fr”，结果却是 4 列；正确做法是明确写出 1fr 2fr 1fr 2fr，或换用 grid-auto-flow: column + 子项 grid-column: span 2 控制跨度。
立即学习“前端免费学习笔记（深入）”；
用 repeat(auto-fill, ...) 替代固定数量更健壮
当列数随容器变化时，硬写 repeat(6, 1fr) 容易在小屏上溢出。此时应优先考虑 auto-fill 或 auto-fit：
-
repeat(auto-fill, minmax(200px, 1fr)))：尽可能多放 200px 宽的列，剩余空间均分 -
repeat(auto-fit, minmax(200px, 1fr)))：行为同上，但空列会被塌缩掉（更常用）
注意：auto-fill 会保留空轨道（影响 :nth-child 选择器），auto-fit 则不会——这点在做动态卡片列表时容易被忽略。
