letter-spacing 在 Grid 容器中不生效，主因是子元素为 inline/inline-block 且被 justify-items/align-items 拉伸导致行内盒重排逻辑弱化；需改用 display: block 或 inline-flex，避免 text-align: justify 冲突，并注意 font-variant-east-asian 和自定义属性精准控制。
letter-spacing 在 Grid 容器里不生效？先看父容器是否触发了新的格式化上下文
Grid 容器默认不会阻止 letter-spacing，但一旦子元素是 display: inline 或 inline-block 且被 Grid 的 justify-items / align-items 拉伸，浏览器可能因行内盒重排逻辑弱化而忽略字距调整。常见现象是：文字明明写了 letter-spacing: 2px，但在 grid-template-columns: 1fr 1fr 的两栏布局中毫无反应。
- 确保目标文本元素不是被
place-items: center强制居中后“视觉上卡死”的inline元素——改用display: block或display: inline-flex - 避免在 Grid 子项上同时设置
text-align: justify和letter-spacing，Firefox 旧版会丢弃后者 - 若用
font-variant-east-asian: proportional-width处理中日韩字符，letter-spacing对汉字间距影响极小，需搭配text-rendering: optimizeLegibility
用 grid-template-areas 配合 CSS 自定义属性控制不同区域的字距
想让标题区宽松、正文区紧凑、引文区带呼吸感？别靠 JS 动态加 class，直接用 CSS 自定义属性 + grid-template-areas 切分语义区块，再通过选择器链精准下发字距值。
- 在 Grid 容器上定义：
--ls-heading: 0.15em; --ls-body: -0.02em; --ls-quote: 0.08em - 对应区域用
grid-area命名，例如<h1 style="grid-area: heading"></h1> - 然后写规则：
[grid-area="heading"] { letter-spacing: var(--ls-heading); }—— 注意必须用属性选择器，不能只靠 class - 不要把
letter-spacing写在grid-container上，它不继承，子项必须显式接收
字体加载期间 letter-spacing 抖动？用 font-display + size-adjust 缓解
Web Font 加载完成前，后备字体（如 sans-serif）和最终字体（如 Inter）的字宽差异会导致 letter-spacing 视觉跳变，尤其在 Grid 的等宽列中特别刺眼。这不是 Grid 的锅，但 Grid 会让抖动更明显。
- 给
@font-face加font-display: optional或swap，并配size-adjust: 100%（Chrome 122+ 支持）来对齐 x-height - 避免用
em或rem单位设letter-spacing，优先用px或无单位数值（如0.04），减少字体度量变化带来的放大误差 - 如果必须响应式调字距，用
@container查询替代@media，因为 Grid 容器常是流式尺寸主体
Grid 中使用 ch 单位设 letter-spacing 的真实效果
ch 是 0 字符的宽度，常被误认为“适合等宽字体字距控制”，但它在 Grid 排版里其实很危险：当 Grid 列宽由 minmax(20ch, 1fr) 定义时，letter-spacing: 0.5ch 会随字体实际 0 宽变化而浮动，导致同一段文字在不同列中字距不一致。
立即学习“前端免费学习笔记（深入）”；
- 查清当前字体的
ch实际值：用getComputedStyle(el).getPropertyValue('font-ch')（仅 Firefox 支持）或手动测 - 多数场景下，
letter-spacing: 0.03（无单位）比0.5ch更稳定，尤其混排中英文时 - 若真要用
ch，务必配合font-feature-settings: "tnum"锁定数字等宽，否则数字 0 和字母 o 的ch值可能差 15%
字距不是网格线，没法靠 gap 统一调度；它依附于文本渲染管线，而 Grid 只负责框。调的时候得盯着 DevTools 里 Layout → Fonts 面板看实际字宽，别信设计稿标尺。
