如何在CSS Grid中使用命名区域实现多语言排版适配？

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 控制其在区域内的水平位置——命名区域只管“放哪”，不管“怎么放”。