grid-area: none无效，应使用grid-area: ""留位；grid-template-areas中空单元格唯一合法写法是"."；动态控制推荐用占位节点而非切换grid-area。
grid-area 值为 none 不起作用，必须用空字符串
很多人试过给某个网格项写 grid-area: none 想让它“消失但留位”，结果发现单元格直接塌陷了——none 是无效值，CSS 规范里它只用于 clip-path 或某些属性的重置，并不适用于 grid-area。
真正能留空占位的做法，是让该元素依然参与网格布局，但不指定任何区域名，即：不设 grid-area，或显式设为 grid-area: ""（空字符串）。浏览器会把它当作一个“无名网格项”，仍占据分配到的轨道位置。
-
grid-area: none→ 解析失败，回退到默认值（等价于未设置） -
grid-area: ""→ 合法值，明确表示“不归属任何命名区域”，但仍按顺序/自动定位规则占位 - 若用
display: none或visibility: hidden，单元格会塌陷或留空白但不占网格流位置，不符合“占位”需求
用 grid-template-areas 定义空位时，点号 . 是唯一合法占位符
在 grid-template-areas 里想留空，不能写 ""、none、null，甚至不能留空格或换行断开——只有单个英文点号 . 被规范明确定义为空单元格标记。
它不是“忽略”，而是主动声明一个不绑定任何元素的网格单元，尺寸由对应行列轨道决定，背景、边框、间距等样式照常生效。
立即学习“前端免费学习笔记（深入）”；
- 写成
"header header ."→ 第三列是空单元格 - 写成
"header header "（末尾空格）→ 整行声明无效，整条grid-template-areas失效，回退到自动网格 - 连续多个空位用多个
.：如". . sidebar"表示前两列都为空 - 点号之间必须用空格分隔，
".. sidebar"是非法语法
动态插入空单元格？别用 grid-area 控制，改用伪元素或空 <div>
<p>如果需要 JS 控制某处“临时留空”（比如条件渲染中跳过某个区块但保持布局稳定），靠切换元素的 <code>grid-area 值不可靠——它不改变元素是否存在，只是改名字，无法触发空位生成。
更可控的方式是：保留一个始终存在的占位节点，用内容或伪元素撑开。否则容易出现布局抖动或轨道重计算。
- 推荐用空
<div class="placeholder"></div>，配合grid-area指向命名区域，再用visibility: hidden或opacity: 0隐藏内容（不破坏布局） - 或用
::before伪元素 +content: ""+ 显式宽高，绑定到某个grid-area名下 - 避免对真实业务组件加
display: none后又指望它占位——它已脱离文档流，网格容器不会为它预留空间
空单元格会影响 grid-auto-flow 的自动填充行为
当使用 grid-auto-flow: row（默认）且存在 grid-template-areas 中定义的空位（.）时，后续自动放置的项目不会填入这些空位，而是继续往后排。也就是说：. 是“静态预留”，不是“待填充槽位”。
这点容易误解：以为留了个点，后面没指定 grid-area 的元素会自动塞进去。实际上不会，它们仍按顺序填入未被 grid-template-areas 显式占用的单元格，跳过所有 .。
- 想让自动项填空位，得放弃
grid-template-areas，改用grid-column/grid-row手动定位，或用 JS 计算空位坐标后注入 -
grid-auto-flow: dense也不会把项目塞进.，它只处理因跨行/跨列造成的间隙，不识别grid-template-areas中的点 - 空位的行列尺寸完全取决于
grid-template-rows和grid-template-columns，和是否有内容无关
display 几乎必然翻车。
