应避免在grid模板中混用rem/em与fr/minmax，因其在字体缩放时导致轨道计算失衡；推荐统一使用px或fr配合绝对值minmax，并用clamp或vw控制gap，同时通过line-height和min-content约束文本容器高度。
字体缩放（如系统DPI调整或浏览器设置）会干扰Grid轨道计算
浏览器字体缩放（比如 Windows 高 DPI 设置、macOS 的“更大文本”选项，或 Chrome 的“字体大小”调节）会改变 em、rem、ex 等相对单位的基准值，而 Grid 的 grid-template-columns 或 grid-template-rows 若依赖这些单位（例如 minmax(10rem, 1fr)），其轨道尺寸就会随缩放非线性偏移——不是错位，是轨道本身“算错了”。尤其当内容含多行文字时，行高变化会进一步挤压网格项高度，导致相邻格子视觉错开。
避免在 grid-template-* 中混用 rem/em 和 fr/minmax
这是最常被忽略的源头。例如写 grid-template-rows: 2rem 1fr minmax(6rem, auto)，缩放 150% 时，2rem 变成 48px（假设基础字号 16px），但 1fr 仍按剩余空间均分，二者比例失衡，整行结构塌陷。
- 统一用
px或fr+minmax()的绝对下限（如minmax(48px, auto)），避开所有rem/em - 若必须响应字号，把字号控制交给
:root，Grid 定义只用fr和px，例如：grid-template-rows: 48px 1fr minmax(48px, auto) -
gap同理：禁用gap: 1rem，改用gap: 12px或gap: clamp(8px, 2vw, 16px)（v单位在缩放下更稳定）
text-size-adjust: none 不解决 Grid 错位，反而有害
有人试图加 text-size-adjust: none 来“锁死”字体缩放，但它只阻止移动端双指放大时的文字重排，对系统级 DPI 缩放无效，且会损害可访问性——屏幕阅读器和视力障碍用户依赖该缩放。更重要的是，它不改变 Grid 轨道的计算逻辑，错位照旧。
- 真正要约束的是布局单元，不是文字渲染
- 给文字容器（如
.grid-item p）设font-size: clamp(14px, 1.1rem, 16px)，让文字自适应，但 Grid 结构保持刚性 - 对含长文本的网格项，加
overflow-wrap: break-word; hyphens: auto;防止单个单词撑破列宽
检查 font-family 回退链是否引发隐式高度变化
中英文混排时，若主字体（如 "Inter"）缺失，回退到系统字体（如 macOS 的 "Helvetica Neue" 或 Windows 的 "Segoe UI"），不同字体的 line-height、ascent、descent 差异会导致同一 grid-row 内多个项实际高度不一致，视觉上“上下错位”。这不是 Grid bug，是字体度量差异暴露了未约束的拉伸行为。
- 给网格项显式设
line-height: 1.4（无单位数值，继承稳定） - 加
height: min-content或min-block-size: 48px锁定最小高度，避免被不同字体撑开 - 用
getComputedStyle(el).fontFamily在 DevTools 控制台验证实际加载的字体，排查回退干扰
字体缩放错位的本质，是把「文本渲染」问题误当作「布局」问题来修。Grid 的稳定性来自轨道定义的确定性，而不是文字的可变性。一旦你开始用 rem 去切分网格，就等于把布局控制权交给了用户的系统设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
