grid-template-areas中空单元格必须用英文点号.表示，且需前后空格分隔；.不占内容空间但保留行列位置，须配合grid-template-columns显式定义列宽才能显示空位。
grid-template-areas里写空格或空字符串会失效
很多人在grid-template-areas里尝试留空时，直接写成"header header "（末尾空格）或"header header ''"，结果整个模板声明被浏览器忽略，回退到自动网格——因为规范只接受单个英文点号.作为空单元格标记。
必须严格用.，且每个.前后用空格隔开：
-
"header header ."✅ 第三列为空单元格 -
"header header .."❌ 语法错误，“..”不被识别 -
"header header . "✅ 末尾空格不影响，但.本身不能带引号或引号内为空
点号.不占内容空间，但它会保留该网格单元的行列位置，其他项不会因此挤压或错位。
点号.不等于“占位元素”，它不撑开轨道尺寸
写了grid-template-areas: "header header ." "nav main .";，但发现第三列完全看不见？这不是.失效，而是你没定义列宽。点号只声明“此处无元素”，不参与尺寸计算。
必须配合grid-template-columns显式设定每列宽度：
-
grid-template-columns: 200px 1fr 100px;→ 第三列固定为100px，.就真能看见“空位” -
grid-template-columns: 200px 1fr;→ 只有两列定义，第三列（对应.）无宽度，视觉上塌陷 - 想让
.所在列保持最小宽度，可用minmax(0, 1fr)或fit-content(1px)兜底
动态切换空位时，别靠JS改grid-area值
想用JS控制某区域“显示/隐藏但保持布局”，比如el.style.gridArea = "sidebar" → el.style.gridArea = ""，这并不能生成空单元格——元素还在DOM里，只是没绑区域名，它仍按自动定位规则占一个格子，不是你想要的“空白”。
真正可控的做法是操作占位节点本身：
- 预留一个
，CSS中设.placeholder { grid-area: sidebar; } - 需要“清空”时，用
placeholder.classList.add("hidden")+.hidden { visibility: hidden; }（不破坏流） - 彻底移除时，用
placeholder.remove()，但要确保父容器grid-auto-flow没设dense，否则后续项可能跳过来填坑
用display: none删掉占位节点后，该区域就真成“未覆盖的隐式网格”，可能引发重排或高度塌陷。
媒体查询中改grid-template-areas必须列数对齐
小屏下想隐藏侧边栏，只写@media (max-width: 768px) { .grid { grid-template-areas: "header header" "main main" "footer footer"; } }，结果main项错位、底部多出空白？问题出在列数不一致：原模板3列，新模板只有2列，浏览器无法映射原有grid-area名，导致项被扔进隐式网格。
正确做法是补齐点号，保持列数统一：
- 原模板：
"header header header" "nav main aside" "footer footer footer" - 小屏模板：
"header header header" "main main ." "footer footer footer"（仍是3列） - 同时确保
grid-template-columns也适配，比如从200px 1fr 250px改为1fr 1fr 0再配合overflow: hidden藏掉第三列
点号.是唯一能跨断点稳定维持网格结构的语法糖，它不依赖JS、不触发重排、也不增加无障碍负担。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
