根源是尺寸未预留、隐式行无约束、文本折行突变三者叠加；须设grid-auto-rows: minmax(48px, auto)，图片父容器用aspect-ratio: 4/3，禁用min-content列宽。
跳动不是加载慢，是浏览器在内容变化后同步重排了整个网格轨道——根源在于尺寸没预留、隐式行没约束、文本折行逻辑突变这三件事同时发生。
grid-auto-rows 没设 minmax() 导致隐式行塌陷
显式 grid-template-rows 只管你手写的行；JS 动态插入的卡片、列表项全掉进隐式行里。如果没设 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 - 用 Chrome DevTools 的 Computed 面板检查
grid-auto-rows是否真生效——CSS-in-JS 或 scoped style 可能把它覆盖掉
图片没预留高度，触发整行重算
<img> 是替换元素，加载前占位 0×0，加载后才反馈真实尺寸。Grid 不会等它，而是立刻重算轨道高度，旁边所有格子都被拖着“闪一下”。
- 必须把
aspect-ratio: 4 / 3写在<img>的**直接父容器**上（比如<div class="card-img"><img></div>），不是写在<img>自身 - 该容器要设
width: 100%，且子<img>设width: 100%; height: 100%; object-fit: cover - 兼容旧环境（如 Safari ≤15.3）：父容器
position: relative+padding-top: 75%，<img>绝对定位塞进去 - 千万别给容器加
height或max-height——它们会覆盖aspect-ratio算出的高度
min-content 列宽让中文和 URL 折行失控
min-content 不是“最小宽度”，而是浏览器测量每个子项里「最长不可拆分片段」的宽度。中文逐字可断、URL 单字符换行、字体加载后换行点偏移，都会让这个值突变，进而强制整行轨道重算。
立即学习“前端免费学习笔记（深入）”；
- 别直接写
grid-template-columns: min-content或fit-content(300px)——前者被静默丢弃，后者在多数浏览器里不生效 - 真要用
fit-content，必须包一层：minmax(0, fit-content(300px))，其中0防止空内容时轨道崩溃 -
white-space: nowrap会让min-content等价于max-content，可能横向溢出，不解决根本问题 - 响应式列数切换时，避免在媒体查询里切
display: grid↔display: flex——display是离散属性，transition 失效，必闪
最常被忽略的是：aspect-ratio 在 <img> 上无效，grid-auto-rows 被 CSS-in-JS 覆盖，以及 min-content 在中英文混排时根本不可预测。这三个点不同时堵住，抖动就压不住。
