chrome 137 中 grid-template-columns 列宽异常主因是 fr 单位在嵌套 grid + 大 gap 场景下被内容撑爆导致连锁压缩，改用 minmax(0, 1fr) 配合 min-width: 0 和 overflow-wrap: break-word 即可修复。
Chrome 137 中 grid-template-columns 列宽异常，基本不是浏览器 bug，而是 fr 单位在嵌套 Grid + 大 gap 场景下被内容撑爆导致的连锁压缩——直接改用百分比或 minmax(0, 1fr) 配合 min-width: 0 就能稳住。
为什么 Chrome 137 里 1fr 2fr 突然变窄？
这不是 Chrome 137 的新问题，而是旧逻辑被放大：fr 单位按「剩余空间」分配，但剩余空间 = 容器宽 − 所有子项固有宽度（含 padding、gap、border）。当你在子网格里写了 gap: 200px 或 padding-right: 220px，它会大幅抬高该子项的最小宽度，父网格被迫压缩其他列来容纳它。
- 典型现象：
.shop-page-grid设了1fr 2fr，但左侧.L1被压到只剩 50px 宽 - 检查
getComputedStyle(el).gridTemplateColumns，值没变，说明声明生效了，只是“剩余空间”被吃掉了 - DevTools 里 hover 每个网格项，看实际占用宽度是否远超预期（比如
.R2显示 width: 842px，而容器才 768px）
用 minmax(0, 1fr) 替代纯 1fr 是最简修复
纯 1fr 不承诺可收缩下限；minmax(0, 1fr) 才真正允许轨道缩到 0，把控制权交还给内容约束逻辑。
- 必须同时加三处：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)+min-width: 0在列项上 +overflow-wrap: break-word防长文本锁死宽度 - Chrome 137 已支持
@supports (grid-template-columns: minmax(0, 1fr))，可用它做降级开关 - 别混写
minmax(0, 1fr) auto——auto列会抢走最小宽度，破坏比例分配
嵌套 Grid 的 gap 必须显式降级为 margin
gap 在 Chrome 137 里本身没问题，但它的值会参与父级轨道最小宽度计算。一旦子网格用了大 gap，父网格就“以为”这列很宽，进而压缩其他列。
- 对子网格（如
.R2）直接移除gap，改用margin模拟：.R2 > .product { margin-right: 200px; }+.R2 > .product:last-child { margin-right: 0; } - 所有网格项统一设
box-sizing: border-box，避免 margin 计算偏差 - 如果必须保留
gap语义，至少把它从 200px 改成 16px 或 24px，再配合minmax(0, 1fr)缓冲
移动端白边和列错位要额外防小数像素
Chrome 137 在高 DPI 屏幕上对 repeat(3, 1fr) 的像素四舍五入误差更敏感，尤其当视口宽是小数（如 375.33px）时，三列累加可能溢出 1–2px，触发横向滚动条并露出白边。
- 用
repeat(3, minmax(0, 1fr))替代repeat(3, 1fr)，给渲染引擎留出裁剪余量 - 在 grid 容器上加
overflow-x: hidden作为兜底，但不能替代精度修复 - 避免
gap用 rem 或小数 px（如gap: 0.8rem），改用整数gap: 12px或clamp(8px, 2vw, 16px)
真正容易被忽略的是：Chrome 137 并未改变 Grid 渲染模型，所有“异常”都来自你没显式切断内容撑开链条——min-width: 0 漏一个元素，minmax() 少写一列，gap 多设 100px，都会让 fr 单位彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
