grid-template-areas必须用引号包裹每行，否则整条规则静默失效；区域名严格区分大小写与空格，仅支持字母、数字、下划线且不能数字开头；RTL需显式重定义grid-template-areas并保持每行列数一致，配合逻辑属性适配间距与对齐。
grid-template-areas 必须用引号包裹每行，否则整条规则静默失效
不加引号的 grid-template-areas: header main / sidebar footer 会被解析器拆成两条非法声明，浏览器直接丢弃整条规则——你看到的是普通文档流，还以为 Grid 没启用。必须写成：
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
引号内空格数不影响解析，但建议对齐；点 . 表示空白单元格，比如 "nav . main"，别留空字符串或纯空格。
命名区域名必须严格匹配，大小写和空格都不能错
子元素设 grid-area 时，值是纯字符串匹配，不是 CSS 选择器：
-
.main-section { grid-area: main; }✅（名称一致） -
.main-section { grid-area: "main"; }⚠️（部分旧浏览器或预处理器会忽略） -
.main-section { grid-area: Main; }❌（Main≠main） -
.main-section { grid-area: main ; }❌（末尾空格导致不匹配）
区域名只支持字母、数字、下划线，且不能数字开头；main-content 或 1st-area 都非法。
立即学习“前端免费学习笔记（深入）”；
RTL 下用媒体查询重写 grid-template-areas 字符串最可靠
仅靠 [dir="rtl"] { direction: rtl; } 不会翻转列序，grid-template-areas 必须显式重定义才能镜像视觉布局：
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
[dir="rtl"] .layout {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
注意：所有断点下的每行「词数」必须一致，否则该媒体查询分支静默失效。比如原模板每行 3 个词，RTL 版也得保持 3 个词，不能写成 "sidebar main"（2 个词）。
配合逻辑属性控制间距和对齐，避免手动维护两套 margin
命名区域解决结构翻转，但内边距、外边距、文本对齐仍需适配 RTL：
- 把
margin-left: 16px换成margin-inline-start: 16px - 把
padding-right: 8px换成padding-inline-end: 8px - 把
text-align: right换成text-align: end
这些逻辑属性在 LTR 下自动映射为左/右，在 RTL 下自动翻转，无需额外 CSS 规则。如果子元素含图片或图标，记得加 justify-self: start/end 控制其在区域内的水平位置——命名区域只管“放哪”，不管“怎么放”。
