auto 在 grid 中等价于 min-content 而非弹性值；实现自适应列宽应使用 minmax(min-content, 1fr)，而非 minmax(auto, 1fr) 或单独 auto。
auto 和 minmax 搭配时，auto 其实不等于 minmax(0, 1fr)
很多人以为 grid-template-columns: auto auto 1fr 中的 auto 会“自动伸缩”，其实它只按内容宽度收缩（类似 min-content），不会主动占剩余空间。真正实现“自适应列宽 + 剩余空间分配”的组合是 minmax(auto, 1fr) 或更稳妥的 minmax(min-content, 1fr)。
关键点：
-
auto单独用在grid-template-columns里，行为等价于min-content，不是弹性值 -
minmax(auto, 1fr)是合法语法，但auto在minmax()中会被解析为max-content（不是直觉上的“自动”） - 想让一列“尽量窄，但能撑开、不换行、且最多占满剩余空间”，应写
minmax(min-content, 1fr)
用 minmax(min-content, 1fr) 实现真实自适应列
比如三列表格：第一列图标（固定窄），第二列标题（随文字变宽，但不挤占太多），第三列操作按钮（紧凑）。可这样写：
.grid {
display: grid;
grid-template-columns: 40px minmax(min-content, 1fr) max-content;
}说明：
立即学习“前端免费学习笔记（深入）”；
- 第一列
40px：图标容器，宽度锁定 - 第二列
minmax(min-content, 1fr)：标题列——最少显示完整单词不换行（min-content），最多拿走所有剩余空间（1fr） - 第三列
max-content：按钮组，按内部元素最大宽度定宽
对比错误写法 auto 1fr max-content：第二列初始可能塌成一个字宽，文字溢出或强制换行，失去“自适应但保内容完整”的意图。
需要“最小宽度保障”时，改用 minmax(120px, 1fr)
如果业务上要求某列不能窄于 120px（比如避免头像被压扁、或确保文字至少两字符可见），就别依赖 min-content，直接设硬性下限：
grid-template-columns: 120px minmax(120px, 2fr) 1fr;
注意：
-
minmax(120px, 2fr)表示该列最小 120px，最大可拿走 2 份剩余空间（相对其他fr列） - 多个
minmax(..., Nfr)并存时，剩余空间按 fr 总数加权分配，不是均分 - 若所有列都是
minmax(X, Yfr)且X总和超过容器宽度，Grid 会优先满足最小限制，超出部分触发滚动或溢出，fr部分归零
兼容性与渲染陷阱：IE 不支持 minmax()，auto 行为也不同
Edge 16+ / Chrome 57+ / Firefox 52+ 支持 minmax()；IE 完全不识别，会退化为 grid-template-columns: none（整行失效）。若需兼容 IE，必须提供降级方案：
.grid {
display: flex; /* IE fallback */
}
.grid > * {
flex: 1; /* 或具体比例 */
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: 40px minmax(min-content, 1fr) max-content;
}
}另外要注意：Chrome 早期版本（≤84）对 minmax(min-content, 1fr) 的计算有延迟，首次渲染可能偏窄，需配合 force reflow 或用 fit-content(100%) 替代（但语义不同）。
真正难的不是写对语法，而是判断哪一列该用 min-content、哪该用固定值、哪又该让步给内容——这得看数据是否可控、换行是否允许、以及用户会不会拖拽窗口反复测试。
