ie11不支持minmax()，会静默丢弃整条grid-template-columns声明，退化为单列流；必须用独立备选方案，如inline-block+固定宽高+手动间隙控制，而非模拟minmax()。
IE11 不支持 minmax()，所谓“完美呈现”只能是降级后可用，不是视觉一致。 它会直接忽略整条 grid-template-columns 规则，退化为单列流式布局。想让它“看起来还行”，关键不在模拟 minmax()，而在提供一套独立、可靠、不依赖 Grid 新特性的备选方案。
为什么 minmax() 在 IE11 里根本不会执行
IE10/11 对 grid-template-columns 中出现的 minmax()、auto-fit、auto-fill 全部不识别。只要规则里含这些词，整条声明会被浏览器静默丢弃，回退到浏览器默认行为（通常是块级元素垂直堆叠）。这不是兼容性打补丁能解决的语法级缺失。
- 检查方式：在 IE11 开发者工具中看 computed 样式，
grid-template-columns值为空或显示为none - 不要试图用
@supports (grid-template-columns: minmax(0,1fr))检测——IE11 连这个@supports查询里的语法都解析失败，整个块会被跳过 - 真正有效的检测必须拆开：
@supports (display: grid) and (grid-template-columns: 1fr)，但注意这仍不能代表minmax()可用
IE11 降级方案必须绕开 minmax() 和 auto-fit
不能指望用 JS 动态计算列数或 patch CSS，维护成本高且易出错。成熟做法是用两套并行布局：现代浏览器走 Grid，IE11 走传统流式 + inline-block 或 float。
- 给容器加双重 class：
card-grid（主样式）和ie11-fallback（仅 IE11 生效） - 用条件注释或 UA 检测加载专属 IE11 CSS，避免
@supports失效风险 - 降级布局核心参数：
- 列宽固定为
280px（兼顾小屏可读与大屏利用率） - 用
display: inline-block; width: 280px; vertical-align: top;替代 Grid 轨道 - 间隙靠
margin-right: 1rem+:nth-child(3n)清除最后一列右距 - 高度不一问题靠
overflow: hidden+ 固定卡片高度（如min-height: 300px）缓解
- 列宽固定为
图片在 IE11 里不撑破网格的关键控制点
Grid 降级后，图片不再受 object-fit 约束（IE11 支持 object-fit，但需配合 width/height: 100% 和父容器高度），此时更需手动稳住尺寸。
- 给图片父容器（如
.card__img）设height: 180px; overflow: hidden;，再让img自由宽高比缩放 - 避免对
img设max-width: 100%单独使用——它不管高度，IE 下极易拉伸变形 - 如果必须保持比例，用
padding-top: 56.25%（16:9）+position: relative+img { position: absolute; }模拟aspect-ratio - 所有图片必须带
srcset和sizes，否则 IE11 加载慢图时高度反复跳变，降级布局也会抖动
真正难处理的不是写两套 CSS，而是当现代布局用 auto-fill 生成 4 列、IE11 只能塞 3 列时，内容密度差异带来的信息层级变化。这时候语义结构和 DOM 顺序比像素对齐更重要——别强求“看起来一样”，先保证“能用、可读、不崩”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
