三列1fr不等宽是因内容撑开或min-width限制；应约束子元素尺寸，用minmax(0,1fr)、overflow隐藏及width:100%等确保内容服从列宽。

为什么 grid-template-columns: 1fr 1fr 1fr 有时列宽还是不等？

常见错觉是写三个 1fr 就一定等宽，但实际中列宽可能被内容撑开、受 min-width 影响，或父容器有 fit-content 行为。Grid 的 fr 是“剩余空间分配单位”，不是绝对宽度控制——只要某列内容自带最小宽度（比如长单词、img、input），它就会优先满足内容需求，再分配剩余空间。

• 检查是否有元素设置了 min-width、white-space: nowrap 或未设置 overflow: hidden
• 确认容器没有 width: fit-content 或 display: inline-grid 导致隐式收缩
• 避免在网格项上直接设 width，它会干扰 fr 计算逻辑

如何强制内容不撑开 fr 列？

让内容“服从”列宽，关键在约束子元素的内在尺寸。这不是 Grid 本身的问题，而是内容流行为需要干预。

• 对文本内容加 overflow: hidden; text-overflow: ellipsis; white-space: nowrap
• 对图片加 max-width: 100%; height: auto，并确保其父项没设 min-width
• 对表单控件如 input，显式设 width: 100%，否则浏览器默认宽度会干扰
• 必要时用 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) —— minmax(0, 1fr) 允许列压缩到 0，防止内容强制拉伸

fr 和 auto 混用时列宽失衡怎么调？

一旦混用 fr 与 auto、px、%，分配逻辑立刻变复杂：auto 先按内容定宽，再把剩余空间分给 fr 列。结果常是“看起来不平均”。

• 要真等宽，全部列都用 1fr，别掺 auto
• 若需固定列（如操作按钮列），改用 minmax(min-content, 1fr) 或 fit-content(200px)，比纯 auto 更可控
• 调试时打开浏览器开发者工具，选中网格容器 → 查看 “Layout” 面板里的 “Grid Overlay”，观察每列实际分配空间是否一致

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.grid > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

真正卡住的往往不是 fr 写法，而是没意识到内容本身的渲染惯性会覆盖布局声明。盯住内容尺寸，而不是只调 grid-template-columns。