minmax() 仅在 grid-template-columns/rows 中配合 repeat() 或显式轨道列表使用才生效；单独使用无效，且需避免子项强制撑宽、父容器无宽度等常见错误。
minmax() 不是“自动适配”的银弹，它只在 Grid 容器明确设置了 grid-template-columns 且子项未强制固定尺寸时才生效；盲目套用反而导致列宽卡死或断层。
什么时候 minmax() 才真正起作用？
它只在 grid-template-columns 或 grid-template-rows 中作为轨道尺寸定义出现时才被解析，且必须配合 repeat() 或显式轨道列表使用。单独写 minmax(200px, 1fr) 不会改变任何东西——没地方放。
- ✅ 正确：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - ❌ 无效：
width: minmax(250px, 1fr)（CSS 属性不支持） - ❌ 无效：
grid-column: minmax(250px, 1fr)（这是轨道定义，不是子项定位语法）
auto-fit 和 auto-fill 的行为差异直接影响列数
两者都让 Grid 尝试用 minmax() 轨道填满容器，但处理“剩余空间”的逻辑不同：前者会收缩空轨道、后者保留空轨道占位。
-
auto-fit：适合卡片布局，空列会被压缩消失，实际列数随容器宽度动态减少 -
auto-fill：适合对齐栅格（如表单字段），即使没内容也会预留轨道，可能导致右侧大片空白 - 实测中，
auto-fit更常用；但若需严格对齐（比如每行必须有 4 列），就得用auto-fill+:empty隐藏空项
为什么有时列宽卡在最小值不动？
常见原因是容器父级没设宽度、或子项内联元素撑开导致 Grid 轨道无法收缩。Grid 轨道的“最大”部分（如 1fr）只有在所有子项都不强制撑宽时才可分配剩余空间。
- 检查子项是否设置了
white-space: nowrap或长单词没断行（加word-break: break-word） - 避免子项设置
width: 100%或min-width: fit-content，它们会阻止1fr收缩 - 父容器若为
display: inline-grid，默认不占满行宽，需显式设width: 100% - 示例修复：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));<br>gap: 1rem;<br>/* 关键：子项不撑宽 */<br>> * {<br> min-width: 0;<br>}
真正麻烦的是嵌套 Grid 或与 Flex 混用时，minmax() 的“最大”部分常被外层约束截断——这时候得退一步，用媒体查询兜底，而不是硬调参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
