Chrome 56及更早、Safari≤10.1、IE全系、Android 4.4 WebView完全不解析display: grid，整条声明静默丢弃；验证需查Computed面板display值是否为grid，@supports无效，须用flex基础布局+组合检测@supports(display: grid) and (grid-template-columns: 1fr)实现兼容。
display: grid 被浏览器完全忽略
不是“不生效”，而是压根没被解析——Chrome 56 及更早、Safari ≤10.1、IE 全系、Android 4.4 WebView 这些环境连 display: grid 都不认识，整条声明静默丢弃。你看到的布局，其实是 display: block 或未设样式时的默认流在撑场子。
验证方法：用 DevTools 选中容器 →「Computed」面板搜 display，如果值不是 grid 或 inline-grid，说明 Grid 根本没启动。
- 别信
@supports (display: grid)在旧环境能兜底——Chrome 56 和 Safari 10.1 直接跳过整块规则，降级样式根本不会加载 - Autoprefixer v9+ 不生成
-webkit-grid或-ms-grid，它只对已写的前缀补属性，不帮你“翻译”现代语法 - 真要兼容，必须手动写两套：
display: flex作为基础布局，再用@supports (display: grid) and (grid-template-columns: 1fr)包裹 Grid 样式（组合检测防半支持浏览器误入）
gap 属性看不见空隙
gap 在 Safari ≤14.1、Chrome ≤65、Firefox ≤62 中被静默忽略——不是报错，是 CSS 解析器直接跳过，DevTools 里该属性显示为灰色或带删除线。
这些版本只认分开写的 grid-row-gap 和 grid-column-gap，且必须同时写两个才有效；只写一个，另一方向间隙为 0。
- 写了
gap: 16px却没空隙？先检查grid-template-columns是否用了固定宽度（如500px 500px），导致浏览器优先保列宽、压缩 gap 为 0；改用1fr 1fr或minmax(0, 1fr)给 gap 留出生效空间 - 别混用
gap和grid-row-gap：旧引擎可能因解析冲突丢弃全部 - Android 4.4 或 IE11 环境下，放弃
gap，改用margin模拟，但所有子项必须加box-sizing: border-box，否则margin-right: 12px+width: 50%会撑破容器
justify-items 或 order 看起来没反应
这两个属性失效，90% 的情况不是语法错，而是子元素根本没进网格流——justify-items 只作用于 Grid 容器的**直接子元素**，order 只对走自动流的子项起效。
一旦子项写了 grid-column、grid-row 或 grid-area，order 就彻底失效；如果子项设了 display: contents 或 position: absolute，它就不再是 grid item，justify-items 对它毫无意义。
- Vue/React 中用 Fragment 或
包裹子节点，会多出一层不可见 wrapper，目标内容变成“孙子”，justify-items失效 - IE11 完全不支持
justify-items和order，不能靠 Autoprefixer 补，只能退到margin: auto或 Flex 布局 - 响应式断点里改了
order却没效果？检查是否漏重置——比如桌面端设.sidebar { order: 2 }，移动端覆盖为order: -1，但没在更大断点里显式还原，残留值会干扰后续逻辑
subgrid 在 Safari 17.3 或 Chrome 114 中依然空白
subgrid 是极新特性，仅 Chrome 115+、Firefox 111+、Safari 17.4+ 原生可用；旧版浏览器（包括 iOS Safari 16）静默跳过声明，布局直接错乱，不是“不兼容”，是 CSS 引擎压根不识别该关键字。
即使父容器写了 grid-template-columns: subgrid，若父级没显式定义轨道（比如只靠 repeat(auto-fit, ...) 推导），DevTools 里 gridTemplateColumns 计算值就是 none，subgrid 无法激活。
- 安全写法：父容器用
grid-template-columns: [start] 120px [middle] 1fr [end]显式命名轨道；子元素先用grid-column: 1 / -1占满，再对其直系子代设grid-column: subgrid -
@supports (grid-template-columns: subgrid)不可靠——Firefox 111–113 存在 bug，检测返回 true 但实际未启用；真实判断方式：getComputedStyle(el).gridTemplateColumns返回空字符串或"none" - 别用
display: contents包裹子元素：它会让子代脱离渲染树，subgrid 彻底失效
最常被忽略的不是写法，而是环境验证方式——本地 Vite/HMR 看到的“正常”，很可能只是缓存的旧 CSS 还在生效；真要确认，得拉真实旧环境（BrowserStack、Docker 里的 Chrome 56）跑线上静态 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
