CSS Grid列宽不均匀主因是grid-template-columns中单位混用或未设比例；应统一用fr实现等比分配，配合minmax()设宽底线，并显式定义grid-auto-columns避免隐式轨道干扰。
如果 CSS Grid 的列宽不均匀，通常是因为 grid-template-columns 中的值没有明确表达比例关系，或者混用了固定值（如 px、rem）与弹性单位（如 fr），导致浏览器按默认规则分配剩余空间，视觉上显得不均。
用 fr 单位定义等比列宽
fr（fraction）是 Grid 专属的弹性单位，表示“可用空间的份数”。只要所有列都用 fr，就能严格按比例分配宽度。
-
grid-template-columns: 1fr 1fr 1fr→ 三等分 -
grid-template-columns: 2fr 1fr 1fr→ 第一列占一半，后两列各占四分之一 -
grid-template-columns: 3fr 2fr 1fr→ 按 3:2:1 分配总宽
避免混用固定值和 fr 导致意外缩放
当固定宽度（如 200px）和 fr 同时出现时，Grid 先减去固定列宽度，再把剩余空间按 fr 份数分配。若内容撑开或容器太窄，容易让 fr 列压缩变形，看起来“不均匀”。
- ❌ 不推荐：
grid-template-columns: 200px 1fr 1fr（第二、三列看似等宽，但受容器尺寸影响大） - ✅ 更可控：
grid-template-columns: 2fr 1fr 1fr，再用minmax(200px, 1fr)限制最小宽度（见下条）
用 minmax() 给弹性列加约束
纯 fr 在小屏下可能过窄，纯固定值又无法响应。用 minmax(min, max) 可兼顾弹性与底线：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: minmax(200px, 1fr) minmax(150px, 1fr) 1fr- 含义：每列至少有指定最小宽度，超出部分按
fr比例伸展 - 这样既保持比例感，又防止文字换行或元素被压扁
检查是否有隐式网格项干扰显式列宽
如果子元素数量超过你定义的列数（比如设了 3 列但放了 10 个子项），Grid 默认开启隐式轨道（grid-auto-columns），而它的默认值是 auto，会导致新增列宽度由内容决定，破坏整体均匀性。
- 显式声明隐式列行为：
grid-auto-columns: 1fr（让所有隐式列也按比例分配） - 或更稳妥地：确保子项用
grid-column明确归属，或控制子项数量匹配列结构
