空网格项高度塌陷是因无内容导致高度为0，而非CSS失效；应使用min-height保底，::before伪元素可临时撑高但有局限，最健壮方案是HTML中保留带grid-area的空占位节点。
空网格项高度塌陷是因为没内容，不是 CSS 失效
浏览器默认不会为无内容的元素保留视觉高度，哪怕它在 grid 容器里占着一个格子。你看到的“消失”，其实是高度缩到 0，但 DOM 和网格位置还在——只是看不见、摸不着、还可能影响相邻项布局。
关键不是让它“不消失”，而是让它“有高度”。靠 height 强制设值容易翻车，min-height 才是保底选择：
-
min-height在内容为空时生效，内容进来后还能自然撑开，不截断 -
height: 100%在父容器高度未定义时等于 0，基本不可靠 - 如果网格项内部用了
display: flex或display: grid，记得检查box-sizing是否被重置——box-sizing: border-box必须显式写上，否则 padding 可能撑破预期 - 别用
display: contents或display: none，前者让元素退出渲染树，min-height彻底失效；后者直接脱离文档流
伪元素 ::before 是纯 CSS 场景下的兜底方案
当不能改 HTML、又没法加内联样式时，::before 能绕过“空盒无高”的限制，靠插入一个不可见但占空间的块来撑开容器。
典型写法：
div.empty-grid-item::before {
content: "";
display: block;
min-height: 60px;
}
但要注意边界：
- 这个技巧只适用于你**完全控制该类名**、且后续不往里面 append 真实内容的场景
- 如果 JS 后续往
div.empty-grid-item里插入文本，::before还在，就会造成双倍高度——得同步清理伪元素或改用 JS 控制显隐 - 不推荐用于需要无障碍支持的区域，因为
content: ""不会被屏幕阅读器识别 - 别指望
::before能独立绑定到某个grid-area名下——伪元素不能脱离宿主存在，无法替代真实 DOM 占位
真正健壮的占位，得靠 HTML 层面留个空节点
grid-area 本身不创建网格项，它只是给**已存在的元素**分配区域。如果 HTML 里根本没写那个格子的元素，CSS 再怎么写 grid-area: sidebar 都没用——空白区域就是真·空白。
所以最可控的做法，是保留一个始终存在的占位节点：
- 用空
，再配.placeholder { grid-area: aside; } - 避免用
visibility: hidden或opacity: 0隐藏真实业务组件后还指望它占位——它们仍参与布局，但语义和可访问性会出问题 - 如果区域永远为空，务必加
aria-hidden="true"和tabindex="-1"，防止屏幕阅读器误读 - 别在
grid-template-areas里写"header header ."想靠点号.留位——.表示“此处不放任何元素”，不是占位，而是跳过，它不影响轨道尺寸，但会让相邻区域挤压
为什么 grid-area: none 不起作用
很多人试 grid-area: none 想让元素“消失但留位”，结果发现格子直接塌了。这不是 bug，是规范行为：none 对 grid-area 是非法值，浏览器会忽略它，等价于没写，元素就按默认自动定位规则走，不保证占你想要的位置。
真正合法的留位写法只有两种：
- 不设
grid-area（让它按顺序自动占位） - 显式设为
grid-area: ""（空字符串），表示“不归属任何命名区域”，但仍参与网格流
动态控制某处临时留空？别靠切换 grid-area 值——它不改变元素是否存在，无法触发空位生成。该用空节点，就老实用空节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
