chrome 56及更早版本完全不支持display: grid，仅识别受限的-webkit-grid前缀语法；chrome 57起才稳定支持标准grid布局，且需用双条件@supports检测并配合渐进增强降级方案。
旧版 Chrome（57 以下）根本不认识 display: grid，不是“显示异常”，而是整条声明被静默丢弃——你看到的布局，是 fallback 的流式排版在撑场子。
Chrome 56 及更早版本压根不支持 display: grid
Chrome 57（2017 年 3 月发布）才是第一个稳定支持标准 display: grid 的版本。Chrome 56 及更早只认实验性前缀语法 display: -webkit-grid，且功能严重受限：
-
grid-gap、fr单位、auto-fit全部不支持 -
@supports (display: grid)在这些版本里直接被跳过——浏览器不认识这个规则，整段 CSS 不生效 -
grid-template-areas、minmax()等现代语法完全无法解析
@supports 必须加约束条件才靠谱
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器误入 Grid 分支——它们能解析 display: grid，但不支持 gap 或 fr，结果布局直接碎裂。
推荐用双条件检测：
@supports (display: grid) and (grid-template-columns: 1fr) {
.grid { display: grid; grid-template-columns: 1fr 2fr; }
}
这样能筛掉几乎所有旧 WebKit 和 IE 环境。降级样式必须写在 @supports 块外层，否则 IE11 和 Safari 9 会完全看不到 fallback。
别碰 polyfill，改用渐进增强 + margin 模拟 gap
css-grid-polyfill 等项目早已停止维护，在 Chrome 45–56 中依赖的 MutationObserver 和 getComputedStyle 本身就有兼容缺陷，容易触发无限循环或内存泄漏。
真正可行的是纯 CSS 渐进增强：
- 先写一套
display: flex+flex-wrap作为基础布局 - 所有网格项统一设
box-sizing: border-box - 横向间隙用
margin-right+:nth-child(3n)清除末项 - 纵向间隙用
margin-bottom+ 父容器负边距抵消最后一行多余空隙
调试时最容易忽略的缓存陷阱
很多人在本地开发服务器（如 Vite）上热更新后没硬刷页面，缓存的旧 CSS 还在生效；或者开了 DevTools 的“停用缓存”但没关面板，导致样式面板显示的是已失效的规则。
确认是否真不支持，最简单的方法是：
- 用 BrowserStack 或 Docker 启一个 Chrome 56 环境
- 访问线上静态 HTML（非
localhost） - 在 Elements 面板里手动删掉所有非
display: grid的布局声明，只留display: grid和子项 - 如果子元素立刻塌成一列，说明它确实没生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
