不够。@supports (display: grid) 仅检测基础支持，无法筛掉 safari≤10.1 等“半支持”浏览器；必须加约束如 @supports (display: grid) and (grid-template-columns: 1fr)，且降级样式须写在 @supports 外层，ie11 才能正确 fallback。
@supports 里写 display: grid 就够了吗
不够。IE11 完全不识别 @supports，Safari 9 及更早版本也跳过它——这意味着你写的 @supports (display: grid) 块在这些浏览器里根本不会执行，但上面的 display: flex 会照常生效。这是设计上的 fallback 机制，不是 bug。
关键点在于顺序：必须把降级方案（如 display: flex）写在 @supports 外层，现代方案写在里面。否则 IE11 会直接忽略整段样式。
- 正确写法：
.grid-container { display: flex; flex-wrap: wrap; }然后另起一段@supports (display: grid) { .grid-container { display: grid; ... } } - 错误写法：把
display: flex和display: grid塞进同一个选择器，或反过来把@supports放在前面 - 别指望
@supports (justify-content: start)能兜底对齐问题——旧 Safari 14.1 之前压根不支持该值在 Grid 上生效，查getComputedStyle返回的还是stretch
Flexbox 回退时 justify-content 对齐不准怎么办
Flex 的 justify-content 在多行 flex-wrap: wrap 下无法控制最后一行位置，而 Grid 的 justify-content: start 可以。回退到 Flex 后，这个能力就丢了。
可行替代是用伪元素 + margin 模拟“左对齐最后一行”：
- 给容器加
::after { content: ""; flex: auto; }，让最后一行左侧始终有“占位项”，再配justify-content: flex-start，视觉上就接近左对齐效果 - 如果子项宽度固定（比如
flex: 0 0 200px），可配合margin-left+:nth-child(3n+1)清除每行首项外边距，比依赖justify-content更可控 - 注意
flex-shrink: 0必须显式设置，否则长文本会让子项收缩，margin-left就会错位
gap 属性失效导致子项贴死，怎么补
gap 在 Safari ≤ 14.1、IE 全系、Android WebView ≤ 76 中会被静默忽略——DevTools 里看到 gap 是灰色或带删除线，getComputedStyle(el).gap 返回空字符串，就是它没生效。
最稳的兼容写法不是靠 autoprefixer 补 grid-row-gap，而是放弃 gap，改用子项 margin + box-sizing: border-box：
- 所有 grid item 加
box-sizing: border-box，避免margin撑破容器 - 横向间隙：用
margin-right，并清除每行末项，例如.item:nth-child(3n) { margin-right: 0; } - 纵向间隙：用
margin-bottom，同理清除最后一行，如.item:nth-child(n+10) { margin-bottom: 0; }（根据总项数调整） - 别用负 margin 父容器 hack（如
margin: -12px），某些 WebView 下会触发 overflow 渲染异常
subgrid 或 align-content 不生效，说明浏览器根本不认
subgrid 在 Chrome 115 前、Firefox 111 前、Safari 17.4 前完全不解析——不是“样式无效”，是 CSS 引擎直接跳过该声明，getComputedStyle 查不到任何值。同理，align-content 在旧 Safari 中对 Grid 多行布局无效，返回默认 stretch。
这时不能靠 @supports 检测单个属性，得回归基础逻辑：
- 对
subgrid：只在@supports (grid-template-rows: subgrid)内启用，不支持时手动写死子项grid-row范围（如grid-row: 1 / 4） - 对
align-content：旧浏览器 fallback 用padding-top或margin-top手动对齐首行，比强行模拟更可靠 - 所有依赖
subgrid的布局，父容器必须有显式grid-template-rows（不能是auto-fit动态生成），否则降级后连轨道基准都没了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
