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