Chrome 57 以下版本完全忽略 display: grid，仅支持 -webkit-grid 前缀且功能受限；降级需手动拆分 gap、用 flex fallback 并通过 @supports 或 UA 判断实现兼容。
display: grid 在 Chrome 57 以下版本中根本不会生效——不是“渲染异常”，而是被浏览器完全忽略。你看到的布局，其实是 fallback 的流式排版（比如 float、inline-block 或没写任何布局时的默认文档流）在起作用。
Chrome 57 是 Grid 支持的分水岭
Chrome 57（2017 年 3 月发布）是首个稳定支持标准 display: grid 的版本。在此之前：
- Chrome 56 及更早：仅识别实验性前缀
display: -webkit-grid，且不支持grid-gap、fr单位、auto-fit、minmax()等关键特性 -
@supports (display: grid)在 Chrome 56 及更早版本里无效——整条规则会被跳过，连带里面所有样式都不会加载 - 所有
grid-template-columns、grid-area、gap等属性都会静默丢弃，DevTools 中显示为灰色或带删除线
别信 autoprefixer 能自动补 grid-gap
autoprefixer 默认不为 Grid 属性加前缀，从 v9.0+ 开始只对 display: grid 补 -ms-grid（仅限 IE），其余如 grid-gap → grid-row-gap/grid-column-gap 完全不处理。指望它兼容旧 Chrome 是白忙。
- 手动拆写：用
grid-row-gap: 1rem和grid-column-gap: 1rem替代gap: 1rem - Safari ≤ 10.1 同样只认这两个拆分属性，且不支持
gap简写 - IE 全系不支持任何 Grid，
grid-gap直接无效，必须放弃
真正可用的降级方案只有两条
polyfill（如 css-grid-polyfill）早已停止维护，对响应式列数、minmax()、内容驱动轨道等现代语法基本失效，还容易触发 MutationObserver 无限循环。务实做法只有：
- 渐进增强：先写
display: flex; flex-wrap: wrap作为基础布局，再用@supports (display: grid)包裹 Grid 样式——IE11 和 Chrome 56 会自然走 flex 分支 - 服务端 UA 判断：检测 User-Agent 是否含
Chrome/[4-5][0-6]，给<html>加class="no-grid"，再用 CSS 区分：.no-grid .grid-container { display: flex; } - 注意顺序：降级样式必须写在
@supports外层；若把display: flex和display: grid写进同一个选择器，IE11 会直接忽略整条规则
调试时最容易被忽略的缓存陷阱
你在本地开发服务器（Vite/HMR）上看到的“正常”，很可能只是缓存的旧 CSS 还在生效。确认是否真不支持，请这样做：
立即学习“前端免费学习笔记（深入）”；
- 用 BrowserStack 或 Docker 拉一个真实 Chrome 56 环境
- 访问线上静态 HTML（不是
localhost） - 在 DevTools 的 Elements 面板里，手动删掉所有非
display: grid的布局声明，只留display: grid—— 如果子元素立刻恢复成垂直堆叠，说明 Grid 确实没启用 - 别依赖“停用缓存”开关：它只影响 Network 面板，不影响已注入的样式表
flex fallback：包括用 ::after + flex: auto 模拟最后一行左对齐、用 box-sizing: border-box + margin-right 替代 gap、显式设 flex-shrink: 0 防止文本撑缩——这些细节才是旧浏览器下视觉一致的关键。 
