fr与固定值混用时列宽“不一致”是因fr先扣除固定尺寸再按比例分配剩余空间，非bug；1fr 2fr始终维持1:2比例，非均分全容器。
grid-template-columns 里 fr 和固定值混用时列宽“不一致”的真实原因
这不是 bug，而是 fr 单位的计算逻辑被误解了。当你写 grid-template-columns: 100px 1fr 2fr，浏览器不会让第二列是“剩余空间的 1/3”、第三列是“2/3”——它先扣除所有固定尺寸（100px），再把剩下的可用空间按 1:2 分配给两个 fr 列。如果容器宽度变化，两列的绝对宽度必然不同，但比例始终是 1:2。
如何让某几列保持固定宽度，其余列均分剩余空间
直接用固定值 + fr 即可，但要注意：所有非固定列必须用 fr，不能混用 auto 或 minmax()（除非你明确需要内容挤压行为）。
-
fr列之间按比例分配剩余空间，1fr 1fr就是等宽，1fr 2fr就是 1:2 - 固定值列（如
80px、5em、minmax(120px, 120px)）完全不受容器缩放影响 - 避免写
100px 1fr auto——auto会根据内容撑开，破坏“均分”预期
/* ✅ 推荐：左侧固定 80px，右侧两列均分剩余空间 */
.container {
display: grid;
grid-template-columns: 80px 1fr 1fr;
}
/ ❌ 避免：auto 会让第三列宽度不可控 /
.container {
grid-template-columns: 80px 1fr auto; / 第三列可能比第二列宽很多 /
}
当内容溢出或最小宽度干扰 fr 分配时怎么办
fr 的分配前提是“有剩余空间”。如果某列设置了 min-width、内容过长、或用了 minmax(min, max) 且 min 很大，就可能挤占其他 fr 列的空间，甚至导致横向滚动。
- 检查是否意外设置了
min-width或width在 grid item 上（会覆盖 grid 自动分配） - 用
minmax(0, 1fr)强制允许压缩到 0（适合文本类内容，防止换行失效） - 调试时临时加
outline: 1px solid red看实际占据区域，比凭空猜更准
/* 安全写法：允许该列压缩到 0，避免撑开整行 */
.grid-item {
min-width: 0; /* 配合 text-overflow: ellipsis 更可靠 */
}
/ 或直接在 grid 定义中约束 /
.container {
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 2fr);
}
响应式场景下固定值 + fr 的常见翻车点
在媒体查询中改 grid-template-columns 时，固定值列容易在小屏下“吃掉太多空间”，导致 fr 列没地方分配。这时候别硬调像素值，优先考虑用相对单位或切换布局结构。
立即学习“前端免费学习笔记（深入）”；
- 小屏建议把固定列改成
fit-content(40px)或直接隐藏（display: none） - 避免
@media (max-width: 480px) { grid-template-columns: 60px 1fr 1fr; }——60px 在手机上仍可能占 1/3 屏宽 - 更健壮的做法：小屏切为单列
grid-template-columns: 1fr，用grid-row控制顺序
固定值和 fr 混用本身很稳定，问题大多出在隐式约束（比如子元素的 white-space: nowrap、父容器的 overflow 设置、或未重置的默认 min-width）上。调试时优先看 computed styles 里的 grid-column-start/end 和实际渲染宽度，而不是只盯 CSS 规则。
