grid-template-areas 在 RTL 下顺序不变，因其按字符顺序解析而非逻辑方向；需用 justify-content: start 等逻辑属性对齐，或为 [dir="rtl"] 单独重定义区域。
grid-template-areas 在 rtl 下为什么顺序没变
因为 grid-template-areas 的字符串值是按文本方向解析的，但定义本身不自动翻转——它只管你写的字符顺序，不管当前 direction。比如写 "header header" "main sidebar"，在 dir="rtl" 下，main 依然渲染在左边（即逻辑上的 start），但视觉上它出现在右侧，容易误以为“错位”。
真正决定区块位置的是轨道命名 + 逻辑定位属性，不是字符串书写顺序。所以别指望改字符串就能适配，得靠 place-items、justify-content 这类逻辑属性来对齐。
- 用
justify-content: start替代justify-content: left，前者随direction自动切换对齐基准 -
grid-column-start: 1是物理列号，固定不变；想按逻辑起点定位，改用grid-column-start: start - 如果用了
grid-template-areas，又希望整体镜像，最稳妥的方式是为[dir="rtl"]单独重写一遍区域定义，而不是依赖自动翻转
grid-auto-flow 在 vertical-rl 下行为异常
grid-auto-flow 默认是 row，意思是“沿块轴填入”。但在 writing-mode: vertical-rl 下，块轴是垂直向下的，行内轴才是水平的——这时候 row 实际表现为从上到下填格子，而非你预期的“从右到左”。
这跟书写方向无关，跟块流方向强绑定。所以不能光看语言是 RTL 就设 column，得看 writing-mode 是什么。
立即学习“前端免费学习笔记（深入）”；
- 判断依据：查
getComputedStyle(el).writingMode，不是direction - 若要让自动填充方向匹配视觉阅读流，优先用
grid-auto-flow: dense+ 显式grid-row/grid-column控制，比依赖row/column更可控 -
grid-auto-flow: column在vertical-rl下会变成从右往左逐列填——但这不是“RTL 适配”，只是块轴变化带来的副作用，慎用
gap 和 justify-items 混用时逻辑方向失效
当同时设置 gap: 1rem 和 justify-items: center，在 dir="rtl" 下，center 仍居中，但 gap 的物理尺寸不会变——问题出在：gap 是间距，不是偏移，它没有逻辑方向概念，永远是“两个轨道之间”的距离。
真正需要逻辑化的，是那些表达“对齐”“起始”“末端”的属性，比如 justify-content、align-self、place-content。gap 只管留白大小，不管哪边多哪边少。
- 不要试图用
gap模拟padding-inline-start，它做不到 - 若需在 RTL 下让内容更贴近右侧边缘，该用
margin-inline-end: 1rem，而不是调大gap -
gap支持gap: 1rem 2rem形式，但两个值始终是block和inline方向，不会因direction交换顺序
用 place-content 替代 justify-content + align-content 组合
place-content 是逻辑属性，它把对齐目标绑定到容器的块轴和内联轴，而不是物理的 x/y 轴。这意味着在 dir="rtl" 或 writing-mode: vertical-rl 下，它能自动调整“start/end”所指的方向，而 justify-content + align-content 是物理属性组合，需要手动维护两套规则。
不过要注意：只有当网格容器有显式高度（或受内容约束）且存在多余空间时，place-content 才生效；空网格或无约束容器里它没效果。
- 推荐写法：
place-content: center stretch，等价于justify-content: center; align-content: stretch，但可继承逻辑方向 - 避免混用：不要在一个规则里写
place-content，又在另一处覆盖justify-content，后者会完全接管，逻辑属性被降级 - 浏览器兼容性没问题：Chrome 66+、Firefox 63+、Safari 14.1+ 都已支持，旧版 Safari 需加
-webkit-前缀但仅限部分值
writing-mode 和 direction 动态映射——漏掉这个，光换属性名也没用。 
