fr单位在低版本浏览器中不被解析，ie11和safari 9–10.1会静默丢弃整条grid-template-columns/rows声明，回退为单列流；必须用-ms-grid体系或百分比替代，且@supports检测需双条件（display: grid）and（grid-template-columns: 1fr）并降级样式写在外层。
fr 单位在低版本浏览器里不是“算错”，而是压根不认——IE11、Safari 9–10.1 遇到 1fr 会直接丢弃整条 grid-template-columns 或 grid-template-rows 声明，回退为单列流布局。
IE11 和 Safari ≤10.1 根本不解析 fr，得换语法
它们不支持现代 Grid 规范里的 fr、minmax()、auto-fit 等关键字。检查开发者工具的 Computed 面板，grid-template-columns 值在 IE11 里显示为空字符串，就是典型表现。
- IE11 必须用
-ms-grid体系：display: -ms-grid、-ms-grid-columns、-ms-grid-row等，且-ms-grid-columns: 1fr 2fr中的fr是草案版语义，和现代行为不同，实际更建议用像素或auto - Safari 9–10.1 虽能解析
display: grid，但一见1fr就静默跳过整条模板声明，布局塌成默认流——这不是 bug，是语法层面未实现 -
@supports (display: grid)在这些环境里返回true，但@supports (grid-template-columns: 1fr)返回false，这是关键区分点，别只靠前者做判断
@supports 检测必须带模板约束，否则 fallback 失效
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器进入 Grid 分支，结果 gap 和 fr 全失效，布局碎裂。
- 推荐检测组合：
@supports (display: grid) and (grid-template-columns: 1fr)，双条件能筛掉绝大多数旧 WebKit 和所有 IE - 别嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块被忽略，降级样式拿不到执行机会 - 降级规则必须写在
@supports块外层——IE11 和 Android 4.4 WebView 直接跳过整个@supports块，只有外层 CSS 才生效
用百分比替代 fr 时，必须满足两个硬条件
百分比能用，但不是简单把 1fr 1fr 换成 50% 50% 就完事。它依赖可预测的容器宽度和固定列数。
- 父容器必须有明确宽度（
width或max-width），不能是fit-content或auto - 所有列宽百分比之和必须严格等于
100%，例如三列均分就得写33.333% 33.333% 33.334%或更稳妥的calc(100% / 3) calc(100% / 3) calc(100% / 3) - 避免混用
%和px：grid-template-columns: 200px 50%中的50%是按整个容器宽算，不是“剩余空间”的一半 - gap 要手动模拟：
gap: 10px得用margin实现，比如三列布局写grid-template-columns: calc(33.333% - 6.666px) calc(33.333% - 6.666px) calc(33.333% - 6.666px)
更现实的取舍：优先降级到 Flexbox，而非硬撑百分比 Grid
当涉及响应式（如 auto-fit）、跨行列（grid-column: 1 / -1）或动态内容时，百分比方案极易断裂。IE11 甚至不支持 -ms-grid 中的百分比，只能用像素。
- 先写稳定降级：
display: flex; flex-wrap: wrap;，再用@supports覆盖为display: grid - Flex 降级分支里要显式重置干扰属性：
flex-basis: auto、align-items: stretch、flex-wrap: wrap - Grid 分支里记得覆盖 Flex 的
margin，否则gap和margin叠加导致间距翻倍 - 对 subgrid、命名区域等高级特性，别指望降级自动推导——父轨道是
40px 1fr 60px，子项就得手动写死grid-row: 1 / 4，否则默认只占一行
真正麻烦的不是写两套样式，而是 subgrid 和 gap 这类特性在旧环境里没有等价语义，必须手动对齐逻辑。别指望浏览器“猜”，它只会静默丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
