Grid 实现列宽平均分布最简洁可靠的方式是用 repeat() 配合 1fr：基础写法为 repeat(auto-fit, 1fr)，推荐搭配 minmax(最小宽度, 1fr) 提升实用性，固定列数时直接用 repeat(N, 1fr)，避免混用 px 与 fr 或写死多段 1fr。
用 repeat() 配合 1fr 是 Grid 实现列宽平均分布最简洁可靠的方式。
基础写法：repeat(auto-fit, 1fr)
这是响应式平均分列的推荐写法，兼顾灵活性与兼容性：
-
grid-template-columns: repeat(auto-fit, 1fr);—— 浏览器会尽可能多地放入等宽列，每列占剩余空间的均等份额 - 搭配
minmax(最小宽度, 1fr)更实用，比如：repeat(auto-fit, minmax(200px, 1fr)))，表示“每列至少 200px，超出部分自动均分” -
auto-fit会合并空轨道，auto-fill则保留所有可能的列槽（即使没内容），日常推荐用auto-fit
固定列数时：repeat(N, 1fr)
如果明确要 3 列或 4 列等分，直接写数字更清晰：
-
grid-template-columns: repeat(3, 1fr);→ 严格三等分 -
repeat(4, 1fr)等价于1fr 1fr 1fr 1fr，语义更紧凑 - 注意：
1fr是“可用空间的 1 份”，不是像素值，所以它天然支持等比分配，不依赖容器具体宽度
避免常见误区
有些写法看似合理，实际效果不符预期：
- ❌
repeat(3, 100px)—— 固定宽，不是“平均”，且超出容器会溢出 - ❌
1fr 1fr 1fr 1fr写死但没用repeat—— 可读性差，列数一多就难维护 - ❌ 混用
1fr和px如1fr 200px 1fr—— 这会导致“平均”失效，只有带fr的部分参与弹性分配
基本上就这些。核心就一条：想平均分，认准 repeat(..., 1fr)，再按需加 minmax() 或指定数量。
