点号 . 是 grid-template-areas 中唯一合法的空白单元格表示法，代表保留轨道但不渲染内容的空位；列数必须严格一致，否则声明失效；. 不可被 grid-auto-flow: dense 填充。
用点号 . 表示空白单元格
grid-template-areas 中唯一合法的“留空”方式是用英文句点 . 占位，它代表一个不分配任何元素的空网格单元格。浏览器会保留该位置的轨道（行列仍存在），但不渲染内容，也不影响其他区域对齐。
常见错误是留空字符串、只写空格，或混用中文句号——这些都会导致整行 grid-template-areas 声明失效，浏览器静默忽略该属性。
- ✅ 正确：
grid-template-areas: "header header" "sidebar ."; - ❌ 错误：
grid-template-areas: "header header" "sidebar ";（末尾空格） - ❌ 错误：
grid-template-areas: "header header" "sidebar .";（中文全角句号）
命名区域中留空必须保持列数一致
每一行字符串的“列数”必须严格相等，否则整个 grid-template-areas 声明无效。点号 . 和区域名一样，都算作一列。
例如你定义了三列布局：grid-template-columns: 1fr 1fr 1fr;，那么每行必须恰好有三个项（区域名或 .）：
- ✅ 正确：
"header header header"、"sidebar . main"、"footer footer footer" - ❌ 错误：
"sidebar ."（只有两列）、"nav main sidebar extra"（四列）
列数不一致时，CSS 解析器不会报错，但会丢弃该声明，回退到无命名区域的默认网格行为。
留空后无法靠 grid-auto-flow: dense 自动填充
用 . 留空的位置，不是“待填空位”，而是**语义上明确排除元素进入的槽位**。即使设置了 grid-auto-flow: dense，自动放置的子元素也不会塞进这些点号位置。
这是因为 grid-template-areas 已固化轨道结构，dense 只能回填由跨行/跨列造成的“内部空洞”，不能覆盖命名模板中显式声明的空白。
- 想让某处可被动态内容填充？别用
.，改用一个有意义的区域名，比如ad-slot或placeholder - 想视觉留白但保留点击/样式能力？得加一个空
<div class="placeholder"></div>并设grid-area: placeholder; - 想完全隐藏该格子且不占空间？不能靠留空实现——Grid 不支持“删除轨道”，只能靠 JS 移除 DOM 或用
display: none隐藏元素
响应式中重定义留空位置要同步更新所有断点
在 @media 中修改 grid-template-areas 时，如果某断点把原本的 . 换成了区域名（或反之），必须确保所有相关子元素的 grid-area 值依然有效——即不能出现子元素指向一个在当前断点下已不存在的区域名。
例如移动端把三栏变单栏："header" "main" "footer"，此时 .sidebar { grid-area: sidebar; } 就会失效（因为 sidebar 不在新模板中），该元素将退回自动放置逻辑，可能出现在意外位置。
更稳妥的做法是：为所有可能被隐藏的区域也准备对应断点下的 grid-area 规则，或统一用 display: none 控制可见性，而非依赖区域名消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
