Grid容器高度塌陷主因是未设grid-auto-rows，隐式行默认auto导致空内容时高度为0；应设minmax(48px,auto)，图片父容器需aspect-ratio，禁用min-content列宽，响应式保持display:grid不变。
动态加载内容后 Grid 容器高度塌陷，不是 JS 没执行完，而是隐式行没设最小高度，浏览器默认按 auto 计算——空内容时就是 0。
grid-auto-rows: minmax() 是必须写的底线规则
显式定义的 grid-template-rows 只管你手写的那些行；JS 动态插入的新项（比如卡片、列表项）全掉进隐式行轨道里。不设 grid-auto-rows，它就用浏览器默认值 auto，而这个 auto 在父容器无高度约束、子项无 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模式会让空行抢占空间 - 检查 DevTools 的 Computed 样式，确认
grid-auto-rows没被 CSS-in-JS 库或 scoped style 覆盖掉
图片加载前必须由容器“认领”高度
img 是替换元素，Grid 不会替你猜它的最终尺寸。加载前它占位 0×0，加载完成触发重排 → 整行轨道重算 → 视觉一跳。这不是 Grid 的问题，是容器没提前声明“我该有多高”。
- 给图片的**父容器**（不是
img自身）设aspect-ratio: 16 / 9和width: 100%；img设width: 100%; height: auto; object-fit: cover - 旧环境兜底用
padding-top: 56.25%+position: relative容器 +position: absolute; inset: 0图片 - 务必加
min-height: 0到 Grid 项上——否则浏览器默认的min-height: auto会压制aspect-ratio推导出的高度 - 绝对别只设
height或max-height：它们会覆盖aspect-ratio计算结果，且破坏响应式缩放
别让 min-content 列宽放大抖动
min-content 不是“最小宽度”，而是浏览器在允许折行时，测量每个子项里「最长不可拆分片段」的宽度。中文逐字可断、URL 字符级换行、字体加载后换行点偏移——这些都会让列宽突变，强制整行轨道重算，连带影响 1fr 分配。
立即学习“前端免费学习笔记（深入）”；
- 避免
grid-template-columns: min-content 1fr这类写法，除非你能确保所有子项都white-space: nowrap且内容长度可控 - 标题文字从 “编辑” 变成 “编辑用户权限设置”，
min-content列突然撑宽，右侧内容被压缩上移，就是典型同步重排 - 改用
minmax(200px, 1fr)或fit-content(300px)替代min-content，提供更稳定的下限 -
content-visibility: auto在 Grid 中基本无效，截至 2026 年 6 月仍不被支持，加了反而干扰渲染流程
响应式切换时保持 display: grid 不变
媒体查询里写 @media (max-width: 768px) { .list { display: grid; } }，再在大屏切回 flex，这种 display 变更会销毁合成层、强制完整 layout，抖动比内容加载还剧烈。
- 始终让容器保持
display: grid，只通过grid-template-columns调整列数，例如：repeat(auto-fit, minmax(300px, 1fr))) - 如果需要动画入场，给子项加
backface-visibility: hidden+transform: translateZ(0)稳定 GPU 图层 - JS 读取
getBoundingClientRect()前，确保媒体查询已生效完毕，否则会卡在帧中间强制同步 layout
真正难处理的不是单点问题，而是隐式行、图片占位、文本折行三类计算逻辑不一致叠加——比如一个卡片同时含未预留高度的图片、动态变长的中文标题、又落在 min-content 列里，抖动会指数级放大。每处都得单独封堵，没有银弹。
