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：第二列初始可能塌成一个字宽，文字溢出或强制换行，失去“自适应但保内容完整”的意图。
