根本原因是隐式行、图片占位、文本折行三类计算逻辑不一致叠加；需设grid-auto-rows: minmax(48px, auto)、用块级容器配width+aspect-ratio预留高度、避免min-content列，且检查对齐空间与层叠覆盖。
动态加载内容导致 Grid 布局抖动，根本原因不是“内容变多了”，而是浏览器在不同阶段对轨道尺寸的计算逻辑不一致——尤其是隐式行、图片占位、文本折行这三类问题叠加时，抖动会成倍放大。直接写 grid-auto-rows: minmax(40px, auto) 或 aspect-ratio 单独用，大概率压不住。
grid-auto-rows 为什么设了还抖？检查隐式行是否被覆盖
显式定义的 grid-template-rows 只管你手写的那些行；JS 动态插入的新卡片、列表项，全掉进隐式行轨道里。如果只写了 grid-auto-rows: auto（浏览器默认值），那它实际表现是“内容多高就多高”，但前提是父容器没设 height、子项没设 min-height: 0 —— 否则可能被压缩到看不见，等图片一加载又猛弹开。
-
grid-auto-rows: minmax(48px, auto)是安全下限：48px 足够容纳 16px 字体 + 行高 + 内边距，且允许内容撑开 - 避免
grid-auto-rows: 60px这类固定值：长文本或大号字体下会被裁剪，响应式场景下更不可靠 - 若容器高度固定（如
height: 600px），改用grid-auto-rows: 1fr，但必须配grid-auto-flow: row，否则dense模式会让空行抢占空间 - 检查 computed styles 里
grid-auto-rows是否生效：某些 CSS-in-JS 库或 scoped style 可能层叠覆盖掉它
图片加载抖动不是 Grid 的锅，是容器没提前“认领”高度
img 是替换元素，aspect-ratio 直接写在它上面无效。真正起作用的是包裹它的块级容器，而且这个容器必须有明确宽度，否则比例算不出高度。
- 正确结构：
<div class="card-img"><img src="..."></div>，然后给.card-img设width: 100%+aspect-ratio: 4/3 - Flex/Grid 子项要加
min-height: 0：否则浏览器默认的min-height: auto会压制aspect-ratio计算出的高度 - 别同时设
height或max-height：它们会覆盖aspect-ratio推导出的高度 - 兼容性兜底用
padding-top：比如height: 0; padding-top: 75%（对应 4:3），再把img绝对定位塞进去
文本内容变长引发列宽重算？min-content 别乱用
min-content 不是“最小宽度”，而是“最长不可折片段的宽度”。中文逐字可断、URL 强制单字符换行，都会让列宽突然塌缩或暴涨，触发整行重排。
立即学习“前端免费学习笔记（深入）”；
- 别在关键布局列写
grid-template-columns: min-content 1fr，除非你能控制所有子项禁折行（white-space: nowrap）且内容长度稳定 - 按钮/标签类元素可用
max-content：它按实际内容宽度伸缩，不触发意外折行 - 更稳的替代是
fit-content(200px)：下限由内容撑开，上限 200px 防溢出，Safari 12.1+ 支持良好 - 动态列表中 key 复用时，不同长度文本切换会高频触发重排，DevTools Layout 面板能看到密集的 layout cycle
justify-self 对齐失效？先看有没有“对齐空间”
很多所谓“抖动”其实是 justify-self 根本没生效——因为网格项已经占满所在列轨道，没有剩余空间可对齐。
- 检查 computed width 和所在单元格宽度是否相等：相等 = 没空间；小于 = 有空间，再排查其他干扰
- 删掉所有
margin: auto：它和justify-self冲突，规范规定 automargin 优先，justify-self静默失效 - 跨列元素（如
grid-column: 1 / 3）的justify-self: end是贴自己所占区域右边缘，不是整个容器右边缘 - 确保父容器是
display: grid，且目标元素是直系子元素，中间不能插 wrapper
真正难的不是查文档配对某一行 CSS，而是确认图片宽高比是否随接口返回动态变化、aspect-ratio 是否被父级 flex-shrink 抑制、minmax() 下限是否被字体加载延迟拉低——漏掉任意一环，抖动就还在原地等着你。
