空盒子塌陷导致网格错位应优先在容器层用 grid-auto-rows: minmax(60px, auto) 统一设隐式行最小高度，辅以子项 min-height 防塌陷，并排查 display、box-sizing 及 height/max-height 冲突。
空盒子塌陷导致网格错位怎么办
网格容器里的 div 一没内容就高度归零，旁边格子自动上挤，布局直接乱掉——这不是 CSS 失效，是默认行为。浏览器不会为“空”保留视觉占位，除非你明确告诉它：“这里必须撑开”。
最直接的办法就是给空盒子加 min-height，而不是只用 height。前者保底、后者强制，一旦内容超了反而会溢出或遮挡。
-
min-height更安全：内容动态插入时（比如 JS 渲染后填充），不会被截断 - 避免只写
height: 100px：若父容器高度未定义，子元素的百分比高度会失效，height: 100%在空盒子里大概率等于 0 - 如果网格项需等高，优先在
grid-template-rows里统一设行高（如grid-template-rows: 1fr 1fr），再配合子项min-height防塌陷
grid-item 内容为空时 min-height 不生效？检查 display 和 box-sizing
min-height 在某些组合下会“假装看不见”，常见于用了 display: flex 或 display: grid 的子项内部，或者 box-sizing: border-box 被覆盖。
- 确认空盒子没被设成
display: contents或display: none——前者会让元素“消失”于渲染树，min-height彻底无效 - 检查是否意外设置了
height: 0或max-height: 0，它们会压制min-height -
box-sizing: border-box是默认值，但若重置过全局样式（如某些 CSS Reset），记得显式声明，否则 padding 可能撑破预期尺寸
用伪元素 hack 强制占位（适合纯 CSS 场景）
当无法改 HTML、又不能加内联样式时，可以用 ::before 插入一个不可见但占空间的元素，绕过“空盒无高”的限制。
立即学习“前端免费学习笔记（深入）”；
div.empty-grid-item::before {
content: "";
display: block;
min-height: 60px; /* 和你需要的占位高度一致 */
}注意这个技巧的边界：
- 仅适用于你**完全控制该类名**且不依赖 JS 操作真实内容的场景
- 若后续 JS 往该盒子 append 文本，伪元素仍存在，可能造成双倍高度，需同步清理
::before - 不推荐用于需要无障碍支持的区域——屏幕阅读器不会读取
content: ""
Grid 布局中更健壮的占位策略
单纯靠子元素自己撑高，容易受嵌套层级、flex/gird 混用、margin 折叠影响。真正稳定的方案是从网格容器层面对齐预期。
- 用
grid-auto-rows: minmax(60px, auto)替代逐个设min-height，让所有隐式行都有底线高度 - 如果某列固定宽度但行高要自适应，用
grid-template-rows: repeat(3, minmax(60px, max-content)))明确行约束 - 慎用
align-items: start：它会让所有项目顶部对齐，空盒虽有高度但可能看起来“悬空”，此时加justify-content: stretch（默认值）才能自然拉满
空盒子占位这事，表面是高度问题，实际是渲染流与布局上下文的博弈。越往容器层做约束，越不容易被局部样式带偏。
