minmax() 的最小值被忽略是因 CSS 网格默认 min-width: auto 导致列塌缩；应使用 minmax(0, 1fr) 并为网格项设 min-width: 0，或搭配 white-space: nowrap 防换行压缩。
grid-template-columns 里 minmax() 的最小值被忽略
当某列内容很少但实际宽度远小于预期，甚至被压缩到几乎看不见，大概率是 minmax() 的第一个参数（最小值）没生效。这不是浏览器 bug，而是 CSS 网格的自动最小尺寸策略在起作用：默认会把所有轨道的 min-width 视为 auto，然后按内容撑开；如果内容为空或极短，该列就会塌缩。
解决方法不是单纯调大 minmax(200px, 1fr) 的第一个参数，而是要显式覆盖网格项的最小内联尺寸：
- 给该列对应的网格项加
min-width: 0或min-width: fit-content（视场景而定） - 更稳妥的做法是在
grid-template-columns中用minmax(min-content, 1fr)或minmax(0, 1fr)—— 注意，0是合法的最小值，且能真正阻止压缩 - 若该列需容纳文本但又不能换行，记得同时设
white-space: nowrap，否则minmax(200px, 1fr)仍可能因换行导致实际宽度远小于 200px
使用 minmax(0, 1fr) 代替 minmax(auto, 1fr)
minmax(auto, 1fr) 中的 auto 实际等价于 min-content，它会根据内容最长单词或不可断行单元计算最小宽度。一旦内容可断行或为空，这值就极小，列就塌了。
换成 0 就绕过了内容依赖：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: minmax(0, 1fr) minmax(200px, 2fr) minmax(0, 1fr);
这样中间列至少 200px，两边列即使无内容也不会消失，且能正常分配剩余空间。
注意：minmax(0, ...) 不会影响布局语义，只是解除最小尺寸的“内容锚定”，属于标准用法，现代浏览器全部支持。
某列固定宽度但被其他列挤占怎么办
比如写成 grid-template-columns: 150px 1fr 1fr，结果第一列还是变窄了——这通常是因为父容器太小，或存在隐式 min-width: auto 干扰。
- 检查父容器是否设置了
width或max-width，导致整体网格可用空间不足 - 确认没有对网格项设置
justify-items: stretch以外的值，或意外的width覆盖 - 最直接的兜底方案：给该列对应的网格项加
min-width: 150px和max-width: 150px，强制锁定 - 若需响应式，可用
minmax(150px, 150px)替代单纯数字，语义更清晰
flex-basis / width / min-width 在 grid item 上的优先级
网格项上的 width、min-width、flex-basis 不会直接控制列宽，它们只影响**该网格项自身的内容盒**。列宽由 grid-template-columns 决定，但这些属性会反向影响轨道的 minmax() 计算结果（尤其是 min-content 部分）。
所以别指望靠给 item 设 width: 200px 来“撑开”一列。真正可控的入口只有两个：
-
grid-template-columns中的minmax()第一个参数（推荐用0或具体像素值） - 对应列所有网格项的
min-width（统一设为0可消除内容干扰）
多列联动时，最容易被忽略的是：只要有一项没设 min-width: 0，整列就可能因那个项的内容塌缩。得逐个检查。
