empty-cells仅作用于table元素且仅在border-collapse:separate时生效，取值show或hide；对Grid/Flex布局无效，因其是CSS2专为表格设计的属性。
empty-cells 和 CSS Grid 没有关系，它只作用于 HTML <table> 元素，对 <code>display: grid 容器完全无效。
你无法用 empty-cells 优化 Grid 中的“按需加载”网格项——这个组合本身是个误解。
为什么 empty-cells 对 Grid 失效
empty-cells 是 CSS2 为表格设计的属性，规范明确限定其适用元素为 <table>、<code><td>、<code><th> 等表格盒模型。Grid 容器及其子项属于完全不同的布局上下文，浏览器会直接忽略该属性在 Grid 上的声明。
<h3>Grid 中“空格位”的真实控制方式</h3>
<p>Grid 里所谓“空网格项”，通常指：显式定义了网格线但未放置子元素的单元格，或子元素被 <code>display: none / visibility: hidden 隐藏后留下的空白区域。控制它们的行为要靠 Grid 自身机制：
-
grid-template-areas中用.（点）显式声明空单元格，它不占内容流，也不渲染任何盒 - 未被
grid-area或grid-column/grid-row覆盖的轨道，不会自动产生“空项”——它只是未被占用，不是“空格” - 若用 JavaScript 动态插入/移除网格项，空白由 DOM 是否存在决定，而非 CSS 属性
按需加载网格项的可行做法
真正实现“按需加载”（比如滚动触达才渲染），得结合 JS 和 Grid 的响应式能力，而不是依赖不存在的 CSS 属性：
- 初始只渲染可视区内的
<div class="grid-item">，其余占位用 <code>height: 0+overflow: hidden或display: none - 监听
IntersectionObserver，当某项进入视口时，再动态插入真实 DOM 节点并赋予grid-area或位置属性 - 避免用
visibility: hidden占位——它仍参与布局计算，可能引发重排；优先用display: none或移除节点 - 若用 React/Vue，确保 key 正确，避免 Grid 轨道因节点增删发生意外偏移（例如用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))比固定行列更鲁棒）
容易被忽略的关键点
Grid 的“空”是逻辑上的轨道未被占用，不是视觉上需要隐藏的“空单元格”。想让某个格子看起来“空”，最可靠的方式是根本不在那里放元素；想让它“动态出现”，就得操作 DOM 或切换 display，CSS 层面没有捷径可走。
立即学习“前端免费学习笔记（深入）”；
