CSS Grid子元素宽度不均的解决核心是用fr单位定义弹性比例或repeat()统一列结构：fr按剩余空间比例分配，repeat()可快速生成等宽列，需注意避免内容、min-width及fit-content干扰。
子元素宽度不均，通常是因为没有明确控制列轨道的分配方式。CSS Grid 中默认按内容撑开，容易导致宽窄不一。解决核心是用 fr 单位定义弹性比例，或用 repeat() 配合 fr/固定值统一列结构。
用 fr 单位让列等宽或按比例分配
fr（fraction）代表可用空间的“份数”，浏览器会自动按比例分配剩余空间。比如三列等宽：
grid-template-columns: 1fr 1fr 1fr;若想第一列占 2 份、后两列各占 1 份：
grid-template-columns: 2fr 1fr 1fr;注意：fr 只作用于 剩余自由空间，已有固定宽度（如 200px）或 minmax(200px, 1fr) 的列会先占位，再分剩下的。
立即学习“前端免费学习笔记（深入）”；
用 repeat() 快速生成均匀列结构
避免手写多个 fr，尤其列数多时。例如 5 列等宽：
混合单位也支持：
grid-template-columns: repeat(3, 150px 1fr);这会生成 6 列：每组“150px + 1fr”，共重复 3 次。还可配合 auto-fit/auto-fill 实现响应式自适应列数：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) );检查是否被内容或 min-width 干扰
即使设了 1fr，子元素若含长单词、图片或设置了 min-width: 200px，仍可能撑开列宽。可加：
- overflow-wrap: break-word; 防止长文本溢出
- img { max-width: 100%; height: auto; } 约束图片尺寸
- 移除子项上不必要的 min-width 或设为 auto
慎用 fit-content 和 auto
fit-content(200px) 或 auto 会让列宽由内容决定，易造成不均。除非明确需要“内容自适应”，否则优先用 fr 或固定值 + fr 混合布局。
