minmax()是css grid中定义轨道尺寸范围的关键字，非函数，仅用于grid-template-columns/rows，需指定合理最小值和最大值（如minmax(250px, 1fr)），且依赖父容器明确尺寸才能生效。
minmax() 确实能减少媒体查询，但别指望它完全替代——它只管单维尺寸约束，不感知视口断点或内容变化。
什么时候该用 minmax() 而不是固定值？
当你希望某列/行在“最小不能太窄、最大不能太宽”之间弹性伸缩时，比如卡片网格、表单字段、侧边栏。固定值（如 1fr 或 200px）要么撑满浪费空间，要么硬卡死导致溢出。
-
minmax(250px, 1fr)：每列至少 250px，剩余空间均分 -
minmax(min-content, 1fr)：文字最少占自身宽度，最多撑到可用空间 - 避免写
minmax(100px, auto)——auto在 grid track 中语义模糊，多数浏览器当max-content处理，容易撑爆容器
minmax() 和 repeat() 搭配的常见陷阱
很多人直接写 repeat(auto-fit, minmax(300px, 1fr)))，结果小屏下空白列残留或卡片错位。问题不在函数本身，而在容器 padding 和子项 margin 没被纳入计算。
- 务必给 grid 容器设
gap，而非依赖子项margin—— 后者不参与 track 尺寸计算 -
auto-fit会收缩空轨道，auto-fill则保留所有轨道（含空的），响应行为不同 - 若子项有固定
width或min-width，会覆盖minmax()的最小约束，优先级更高
为什么有时 minmax() “没反应”？
最常见原因是父容器没设明确宽度（比如 width: 100% 或 max-width），或 grid 容器是 inline 元素。Grid track 尺寸基于可用空间计算，没空间就无从伸缩。
- 检查父级是否设置了
display: block或显式宽高 - Chrome DevTools 的 Layout 面板里看 grid 容器的 “Available space” 是否非零
- Firefox 支持
minmax(min-content, max-content)，但 Safari 目前仅部分支持max-content，稳妥起见建议用像素或fr
真正难的不是写出 minmax() 表达式，而是判断哪些尺寸该由它管、哪些该交给 aspect-ratio、clamp() 或 JS —— 比如图片高度随宽度变化，minmax() 无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
