隐式行设底线、图片容器提前占位、避开min-content列宽三者缺一不可；grid-auto-rows需用minmax(48px,auto)，图片父容器设aspect-ratio，Grid子项加min-height:0，禁用min-content列宽。
直接给隐式行设底线、让图片容器提前占位、避开min-content列宽，三者缺一不可。只做其中一项，抖动大概率还在。
grid-auto-rows 必须设 minmax() 下限
显式定义的 grid-template-rows 不管动态插入的项——它们全掉进隐式行轨道里。默认 grid-auto-rows: auto 实际表现是“内容多高就多高”，但初始渲染时若内容为空或图片未加载，浏览器可能压成 0 高度，等数据进来再猛弹开。
-
grid-auto-rows: minmax(48px, auto)是经过验证的安全下限：48px 足够容纳 16px 字体 + 行高 + 内边距，且允许长文本自然撑开 - 避免
grid-auto-rows: 60px这类固定值：响应式缩放或大号字体下会被裁剪 - 若容器高度固定（如
height: 600px），改用grid-auto-rows: 1fr，但必须同步加grid-auto-flow: row，否则dense模式会打乱顺序 - 用 Chrome DevTools 的 Computed 面板检查
grid-auto-rows是否被 CSS-in-JS 或 scoped style 覆盖
图片容器必须用 aspect-ratio 预留空间
img 是替换元素，自身设 aspect-ratio 无效；抖动根源是父容器没提前“认领”高度。只有块级容器在宽度确定的前提下按比例预留空间，才能阻断重排链。
- 给图片直接父容器（如
.card-img）设aspect-ratio: 4 / 3和width: 100%，再让img设width: 100%; height: 100%; object-fit: cover; display: block; - 必须加
min-height: 0到 Grid 子项上：否则浏览器默认min-height: auto会压制aspect-ratio推导出的高度 - 别同时设
height或max-height：它们会覆盖aspect-ratio计算结果 - 兼容旧 Safari（iOS 15.4 之前）：用
padding-top: 75%+position: absolutefallback，但需确保父容器宽度已由 Grid 列宽定义
别碰 min-content 列宽，尤其含中文或 URL
min-content 不是“最小宽度”，而是浏览器测量每个子项里「最长不可拆分片段」的宽度。中文逐字可断、URL 强制单字符换行、字体加载后换行点偏移，都会让这个值突变，触发整行轨道重算和 1fr 重新分配。
立即学习“前端免费学习笔记（深入）”；
- 禁止在关键布局列写
grid-template-columns: min-content 1fr，除非你能控制所有子项禁折行（white-space: nowrap）且内容长度可控 - React/Vue 中
useEffect或mounted改标题文字，只要容器没预设尺寸，就会同步触发重排 - 如果真要弹性列宽，用
minmax(120px, 200px)或fit-content(200px)更稳妥 -
content-visibility: auto会加剧抖动——它不预留尺寸，还强制轨道重算，动态列表中慎用
最易被忽略的是：Grid 本身不接管子元素内容尺寸。你设了 grid-template-rows，但图片、富文本、异步组件这些“内容层”的高度失控，依然会把整行顶开。所以必须在容器层（aspect-ratio）、轨道层（grid-auto-rows）、列逻辑层（避开 min-content）三处同时卡死。漏掉任何一层，CLS 就可能回来。
