chrome 57仅支持基础grid语法且需-webkit前缀，现代特性全无效；chrome 120完整支持grid level 2，含subgrid、minmax()、auto-fit等，同一css在两版本中表现为“是否生效”的本质差异。
display: grid 在 Chrome 57 和 Chrome 120 的行为差异，核心不是“表现不同”，而是“支持能力断层式升级”——Chrome 57 是 Grid 的起点，Chrome 120 是现代 Grid 的成熟态。你写的同一段 CSS，在两个版本里可能一个完全不生效、一个功能全开，甚至渲染结果截然相反。
Chrome 57 只认 display: -webkit-grid，且几乎不解析现代语法
Chrome 57（2017 年 3 月）首次稳定支持标准 display: grid，但此前所有版本（包括 56）只识别实验性前缀 display: -webkit-grid，而且：
-
grid-gap被静默忽略，必须拆成grid-row-gap: 1rem和grid-column-gap: 1rem -
fr单位、minmax()、auto-fit、grid-area等全部无效，DevTools 中显示为灰色或带删除线 -
@supports (display: grid)在 Chrome 56 及更早中整条规则被跳过，连带内部样式都不加载 - autoprefixer v9+ 不会为这些属性加前缀，指望它“自动兼容”是徒劳
Chrome 120 已完整支持 Level 2，subgrid 和响应式轨道成标配
Chrome 120（2024 年中发布）已启用完整的 CSS Grid Level 2，关键变化包括：
-
grid-template-columns: subgrid和grid-row: subgrid均可原生使用，无需 polyfill -
minmax(0, 1fr)、fit-content(200px)、嵌套repeat()等复杂表达式稳定解析 -
gap支持双值写法（gap: 12px 8px）和逻辑方向（row-gap: 1em） -
@supports检测精度提升，例如@supports (grid-template-rows: subgrid)在 120 中返回准确布尔值
同一行 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 在两版中的实际效果
这行代码在 Chrome 57 和 Chrome 120 下根本不是“细微差异”，而是“是否运行”的区别：
- Chrome 57：整条声明被忽略 → 回退到
display: block流式布局，子元素垂直堆叠 - Chrome 120：正常生成自适应列数，内容宽度低于 200px 时自动折行，
1fr均分剩余空间 - 中间版本（如 Chrome 65–110）可能部分支持：能识别
repeat()但把minmax()当作200px处理，导致列宽僵硬、无法伸缩 - 调试时务必清缓存并用真实环境验证——本地 HMR 或 localhost 的“正常”很可能是旧 CSS 缓存残留
真正要检查的不是浏览器版本号，而是特性是否被解析
别只看 UA 字符串里有没有 “Chrome/57”。确认 Grid 是否起效，唯一可靠方式是：
- 打开 DevTools → Elements 面板 → 找到容器元素 → 在 Styles 标签页搜索
display，确认值为grid（非block或inline） - 再搜
grid-template-columns，看是否显示为有效值（非unset或灰色删除线） - 执行
getComputedStyle(el).gridTemplateColumns，Chrome 57 返回空字符串，Chrome 120 返回解析后的实际列定义 - 如果用了
subgrid，必须用getComputedStyle(el).gridTemplateRows检查是否返回"subgrid"，仅靠@supports不保险
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
