grid-auto-rows: minmax() 是预留高度的唯一可靠方式，因隐式行轨道未设最小高度会导致布局跳动；需配合占位符控位置、JS 补时机，三者缺一不可。
grid-auto-rows: minmax() 是预留高度的唯一可靠方式
动态插入内容后布局跳动、卡片被压扁，根本原因是隐式行轨道没设最小高度。浏览器默认的 grid-auto-rows: auto 在父容器无固定高、子项无 min-height 时，会塌缩成接近 0 的高度，直到内容加载完成才撑开——这就是抖动源头。
必须显式声明：grid-auto-rows: minmax(48px, auto)。其中 48px 是最小可读高度（适配 16px 字体 + 行高 1.5），auto 允许内容自然撑开。别用 grid-auto-rows: 60px 这类绝对值，字体缩放或长文本会溢出。
- 小屏响应式下建议改用
minmax(56px, max-content)，兼顾更大字体和弹性伸展 - 若卡片含图片，配合
img { aspect-ratio: 16/9; height: auto; }防止加载前高度为 0 - 禁用
grid-template-rows显式定义——它只管“写死”的行，动态项全掉进隐式轨道，而隐式轨道高度由grid-auto-rows控制
用占位符元素而非 DOM 顺序控制插入位置
靠 appendChild() 或 insertBefore() 往 Grid 容器里塞新节点，位置完全不可控：grid-auto-flow: dense 不保证顺序，grid-auto-flow: row 又只按轨道线填，结果常是新卡片插在顶部或错行。
正确做法是 HTML 中预埋语义化占位符：，再给它设 grid-row-start: 3（假设目标行为第 3 行），并确保 display: contents（不占空间但保网格位置）或 visibility: hidden（保留占位）。
- JS 插入时用
placeholder.replaceWith(newCard)，新元素直接继承原占位符的网格线位置 - 绝不能用
display: none隐藏占位符——它会退出网格布局流程，位置信息丢失 - 如果占位符需视觉示意（如灰色虚线框），给它加
min-height: 48px而非height，避免文字溢出
避免 grid-auto-flow: dense 误用于“填补空白”
写了 grid-auto-flow: dense 却没变化？不是语法错，是你误解了它的作用：它只回填**已有轨道内被跨列/跨行腾出的孤立空格子**，比如某个卡片占了 grid-column: span 2 后留下的单格空位；它不会生成新轨道、也不会让空位置自动渲染成带背景的占位区。
- 所有子项都写了
grid-row或grid-area→dense完全不生效 - 用了
grid-template-areas→ 区域模板已固化，dense无权介入 - 只设
grid-template-columns没配grid-auto-rows→ 隐式行轨道不存在，dense无格可填
真要让“空位置”有样式，得让它物理存在：要么用 grid-template-areas 预留槽位（如 "a b c" "d . f"），要么 JS 动态补 并统一加 background 和 border。
异步插入后强制重绘的 JS 补救点
即使 CSS 写对了，动态插入卡片后 Masonry 布局或 Grid 轨道计算仍可能滞后，尤其图片未加载完、字体未回流时。浏览器不会自动触发重排。
两个轻量级补救方式：
- 插入后调用
newCard.scrollIntoView({ block: 'nearest' })，触发容器重绘 - 或更稳妥地修改
transform：newCard.style.transform = 'scale(1)'，强制 GPU 层重绘 - 监听图片加载：
img.addEventListener('load', () => { container.style.display = 'grid'; setTimeout(() => container.style.display = '', 0); })，在 Safari 中特别有效
真正难的从来不是那几行 CSS，而是图片加载、字体回流、响应式断点切换这三件事同时发生时，如何让预留空间既稳又准——minmax() 控高度，占位符控位置，JS 补时机，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
