cls超标主因是未预留尺寸：图片缺宽高、字体度量不一致、隐式行未设minmax、盒模型计算偏差；须用aspect-ratio+object-fit、ascent-override、minmax()、border-box全局重置协同控制。
布局偏移（CLS）在 CSS Grid 页面里，90% 以上都来自尺寸没预留——图片加载前高度为 0、字体换装后基线跳变、动态插入内容没占位。这不是 Grid 本身的问题，是你没给浏览器“预期”。
grid-auto-rows 必须设 minmax()，不能留 auto
动态插入卡片、列表项或“加载中”提示后，新元素掉进隐式行轨道，如果 grid-auto-rows 没显式声明，浏览器默认用 auto，结果就是：空行塌陷、内容一进来整行突然撑开、旁边格子跟着抖。
-
grid-auto-rows: minmax(48px, auto)是安全底线——最小高度覆盖 16px 字体 + 行高 + 内边距，内容多时自动扩展 - 避免
grid-auto-rows: 60px这类固定值，小屏字体放大后文字溢出，大屏又显空 - 若容器高度固定（如
height: 600px），才考虑grid-auto-rows: 1fr，否则易让空行占满视口 - 响应式下建议用
minmax(56px, max-content)，再配合display: -webkit-box; -webkit-line-clamp: 2控制文本行数
图片别用 <img> 直接塞进 Grid 项
<img> 在文档流里，加载前高度是 0，一加载就重排整行，Grid 项宽度可能被挤变形，旁边卡片全跟着跳。
- 换成
background-image：给 Grid 项设background-size: cover; background-position: center，并配min-height: 300px（这个值要覆盖所有断点下的最小可读高度） - 文字层用
position: absolute叠上去，记得加z-index和响应式padding - 关键图文内容仍需保留
<img>+alt，背景图只作视觉优化，不可替代语义 - 更优解是用
aspect-ratio: 4 / 3+overflow: hidden锁容器比例，再让<img>填满（width: 100%; height: 100%; object-fit: cover）
字体加载抖动必须用 ascent-override 补齐
font-display: swap 只保证字能显示，不保证度量一致。系统字体和自定义字体的 ascent/descent 差 5%~10%，标题基线一偏移，CLS 就爆表。
- 打开 Chrome DevTools → Elements → 计算样式，分别查 fallback 字体和自定义字体的
ascent、descent、line-gap - 在
@font-face中写三参数：ascent-override、descent-override、line-gap-override，值用百分比计算，例如ascent-override: calc(920 / 850 * 100%) - 必须加
<link rel="preload" as="font" type="font/woff2" crossorigin>，否则字体还没进缓存队列，override 就失效 - 字号缩放、
em单位、line-clamp要同步控制，否则度量对齐白做
fr 单位错位？先看 box-sizing 和 gap 扣减逻辑
两列 1fr 1fr 看起来宽度不等，不是 fr 有问题，是浏览器在舍入小数像素（比如容器宽 799.5px），或你忘了 gap 是刚性占位、会从总宽里直接扣减。
- 确认容器
Computed width是整数；避免混用px和fr，例如grid-template-columns: 200px 1fr 1fr改成minmax(200px, 1fr) 1fr 1fr - 必须写
* , *::before , *::after { box-sizing: border-box; }，伪元素不继承box-sizing，偷偷多占空间 -
gap: 10px在三列布局中实际扣掉 20px（两个间隙），不是“额外留白”，是参与轨道计算的硬约束 - 子项别设
width: 100%或min-width，长单词会撑裂轨道；加min-width: 0; overflow: hidden更稳妥
真正难的不是写对某一行 CSS，而是把图片占位、字体度量、隐式轨道、盒模型这四件事串起来同步控制——漏掉任意一环，CLS 都可能在某个设备上突然超标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
