minmax() 是 CSS Grid 中定义轨道尺寸范围的函数，作用于 grid-template-columns/rows，约束轨道缩放上下界而非网格项自身尺寸。
minmax() 是什么，为什么不能直接写 minmax(100px, 200px) 就完事
minmax() 是 CSS Grid 中用于定义轨道（grid-template-columns 或 grid-template-rows）尺寸范围的函数，它本身不控制单个网格项（grid-item）的宽高，而是约束某条轨道能缩放的上下界。常见误解是把它当 width 的替代品用，结果发现元素没按预期收缩或撑开——因为它的作用对象是轨道，不是子元素。
真正生效的前提是：该轨道被设为可伸缩（比如用了 fr、auto 或百分比），且父容器有明确尺寸约束（如 width 或 max-width），否则浏览器无法计算“最大”部分。
-
minmax(100px, 1fr)表示：这条列至少 100px，最多占剩余空间的等分份额 -
minmax(min-content, 200px)表示：最小取内容自然宽度，最大不超过 200px -
minmax(20%, 1fr)合法但需注意：20% 是相对于容器宽度计算，而1fr是剩余空间分配，两者基准不同，可能引发意外挤压
用 minmax() 实现「图片卡片自适应但不小于 250px」
典型场景：响应式画廊中每张卡片含图片和文字，希望在小屏时紧凑排列（最少 250px 宽），大屏时尽可能铺满（但不超过 1fr）。
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
repeat(auto-fill, ...)让浏览器尽可能多地填充列，空余空间由1fr均分 - 不用
auto-fit？区别在于：auto-fill保留空轨道（即使没内容），auto-fit会合并空白轨道，更常用 - 如果卡片内图片用
width: 100%但没设height: auto，会出现高度塌陷——minmax()管不了这个，得靠子元素自身处理
minmax() 配合 fit-content() 和 clamp() 的差异
三者都涉及尺寸弹性，但定位完全不同：
-
minmax(200px, 400px)：轨道尺寸必须落在区间内，超出则换行或溢出（取决于其他设置） -
fit-content(300px)：轨道最大取 300px 或内容自然宽度中较小者，最小就是内容宽度，适合“刚好包住内容”的列 -
clamp(200px, 50vw, 800px)：是响应式值函数，可用于任何接受长度的属性（包括width、font-size），但不能直接塞进grid-template-columns（CSS 规范尚未支持）
错误写法：
grid-template-columns: clamp(200px, 50vw, 800px); // ❌ 语法错误
正确做法：用 minmax() 搭配媒体查询，或把 clamp() 用在子元素上控制内部尺寸。
容易忽略的兼容性和失效场景
minmax() 在所有现代浏览器中支持良好（Chrome 57+、Firefox 52+、Safari 10.1+），但以下情况会导致它“看起来没起作用”：
- 父容器没设
width或max-width，且子项内容极少 → 浏览器按最小内容宽度渲染，1fr部分无从分配 - 用了
grid-auto-columns却忘了设grid-auto-flow: column→ 新增项目仍按行排列，minmax()对自动列无效 - 在
grid-template-rows中写minmax(100px, auto)→auto不是有效最大值，应改用max-content或具体长度 - 嵌套 Grid 中外层用了
minmax()，内层又用1fr→ 可能因外层未设高度导致内层1fr计算为 0
最常被漏掉的一点：想让网格项自身响应式缩放，minmax() 不是入口；得靠 grid-column / grid-row 跨格，或配合 aspect-ratio + width 控制内部尺寸。