display: grid 必须显式声明，否则所有 grid-* 属性被忽略；仅设 grid-template-columns 或 gap 不触发网格渲染，chrome 正常而 firefox/safari 退化为块级元素即因未声明该属性。
不是 CSS 写错了，是浏览器对 grid 特性的解析逻辑、支持粒度和默认行为根本不同——没有“统一规范写法”能绕过这个事实，只有分层应对策略。
display: grid 必须显式声明，否则所有 grid-* 属性全被忽略
很多布局在 Chrome 看着正常，到 Firefox 或 Safari 就退化成普通块级元素，首要排查点就是父容器是否写了 display: grid 或 display: inline-grid。只写 grid-template-columns 或 grid-gap 不会触发 Grid 渲染引擎，现代浏览器也一样无视。
- 错误写法：
.container { grid-template-areas: "header main"; }→ IE11、Safari ≤10.1、旧 Android WebView 全部当没看见 - 正确写法：
.container { display: grid; grid-template-areas: "header main"; } - IE10/11 还需额外加
display: -ms-grid，且不能和display: grid写在同一行（IE 会忽略后者）
@supports 检测必须带模板约束，单测 display: grid 会放行半支持浏览器
@supports (display: grid) 在 Safari 10.1、iOS Safari 15.6、EdgeHTML 17 中都返回 true，但这些浏览器不支持 gap、fr、auto-fit，直接进分支会导致布局碎裂。
- 稳妥写法：
@supports (display: grid) and (grid-template-columns: 1fr)—— 双条件筛掉绝大多数 WebKit 旧版和 IE 全系 - 别用
@supports (gap: 1rem)：Firefox 63 前不支持，反而误拦现代浏览器 - 降级样式（如
display: flex）必须写在@supports块外层，IE11 和 Safari ≤9 会直接跳过整个@supports块
gap 在 Safari ≤14.1 / IE 全系 / Android WebView ≤76 中静默失效
gap 属性在多个旧环境中不是“不兼容”，而是被解析器完全跳过：DevTools 显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串。指望 autoprefixer 补前缀没用——它连 row-gap 都不加 -webkit- 前缀。
- 横向间隙替代方案：
.item { margin-right: 12px; }+.item:nth-child(3n) { margin-right: 0; } - 纵向间隙替代方案：
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（父容器负边距抵消） - Safari ≤10.1 只认合写的
gap，写row-gap: 12px会被静默丢弃；且不支持gap: 12px 8px双值简写
box-sizing: border-box 必须全局生效，否则 Flex/Grid 子项尺寸逻辑错乱
旧版 IE 怪异模式把 width 解释为「内容 + padding + border」，而标准模式（及 Chrome/Firefox/Safari）默认只算内容区。这种底层差异会让同一组 width、padding、border 在不同浏览器里渲染出不同总宽。
- 推荐写法：
*, *::before, *::after { box-sizing: border-box; }—— 覆盖所有元素及伪元素，包括动态插入节点 - Flex item 若设了
padding: 10px却没设box-sizing: border-box，它的flex-basis仍按内容宽计算，实际占位变大 - Grid item 的
minmax(200px, 1fr)遇到border: 2px且box-sizing: content-box时，最小宽度实际是 204px，可能破坏网格对齐
最常被忽略的是：伪元素、Shadow DOM、iframe 里的样式需要单独处理 box-sizing，而 @supports 检测无法覆盖这些上下文。真正在意兼容性，就得接受——Grid 不是“写一次，跑 everywhere”，而是“写三层：现代语法 + 特性检测 + 手动 fallback”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
