clamp()不能直接用于grid-template-columns，因该属性只接受轨道列表或repeat()；应改用minmax()配合auto-fit，并将clamp()用于子元素的font-size、width等属性以实现流体效果。
clamp() 不能直接用在 grid-template-columns 上
很多人一上来就想写 grid-template-columns: clamp(200px, 1fr, 400px)，浏览器会静默忽略整条声明——因为 grid-template-columns 不接受单个 clamp() 值作为轨道定义。它只认轨道列表（如 1fr 2fr auto）或 repeat() 表达式。
真正能和 clamp() 协同的，是 minmax() 内部的尺寸参数，或者直接作用于子元素的 font-size、padding、width 等属性。
-
minmax(clamp(200px, 5vw, 400px), 1fr)是非法的：minmax() 的两个参数必须是明确可比较的长度或关键字（如min-content），不能嵌套clamp() - 正确做法是把
clamp()拆出来，用在子元素上控制自身尺寸，Grid 负责布局结构，不越界干预 - 如果你真想让列宽“流体”，优先用
minmax(200px, 1fr)+auto-fit，再用clamp()控制列内文字/图片大小
font-size: clamp() 在 Grid 子项中生效但需注意继承链
Grid 容器本身不渲染文字，font-size 必须落在子元素（比如 .card h2 或 .item p）上才起作用。常见错误是只给容器设了 font-size: clamp(...)，结果所有子项字体还是默认大小。
- 确保目标文本节点有显式样式，例如：
.grid-item h3 { font-size: clamp(1rem, 4vw, 2.25rem); } - 如果用了
inherit或未重置的em单位，父级的font-size变化会叠加影响，导致实际字号偏离预期 - 移动端 Safari 对
clamp()解析严格：第二项必须含单位且线性，1.125rem + 0.3vw可行，calc(1.125rem + 0.3vw)会失效
配合 grid-template-columns: repeat(auto-fit, ...) 实现真正流体网格
Grid 的流体性来自 auto-fit 和 minmax() 的组合，clamp() 则负责让每个格子内部内容“呼吸”得自然。两者分工明确：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 控制列数随宽度增减 -
.card { width: clamp(260px, 90vw, 320px); }—— 防止单卡在超小屏过宽、超大屏撑爆 -
.card h2 { font-size: clamp(1.125rem, 4vw, 2rem); }—— 标题字号平滑缩放 - 注意：不要对
.card同时设width和grid-column: span X，后者会覆盖前者
兼容性 fallback 必须写在 clamp() 前面且不可包裹 @supports
iOS 13.0 的 Safari 识别 @supports (font-size: clamp()) 但不支持 clamp()，导致加了 @supports 反而让 fallback 失效。唯一可靠写法是层叠顺序：
.card h2 {
font-size: 1.5rem; /* iOS 12 / IE / 微信X5旧内核 fallback */
font-size: clamp(1.125rem, 4vw, 2rem);
}这个顺序不能颠倒；也不能用 !important 强制 fallback，否则新浏览器也不会覆盖。
真正容易被忽略的是：当 Grid 子项同时用 clamp() 控制 font-size 和 padding 时，两者的单位缩放节奏未必一致——比如 padding: clamp(0.5rem, 2vw, 1rem) 在小屏可能比字号缩得更快，造成视觉割裂。需要手动对齐比例，而不是依赖“都用 vw”就万事大吉。
