direction: rtl 不会自动镜像 Grid 布局，仅影响行内内容书写顺序和对齐起点；需配合 justify-content、逻辑属性及根元素 dir="rtl" 才能实现完整 RTL 效果。
只加 direction: rtl 不会自动镜像 Grid 布局
很多人以为给 Grid 容器设 direction: rtl 就能“翻转整个网格”，结果发现列顺序没变、间距还在左边、甚至子项错位。这是因为 direction 只影响行内内容的书写顺序和对齐起点，不改变 Grid 的轨道生成逻辑或盒模型物理位置。margin-left 仍是逻辑左（即视觉右），grid-column-start: 1 还是从左起第一列开始——它不会自动变成最右列。
grid-template-columns 本身不反转，但 direction: rtl + justify-content: start 能控制填充方向
Grid 没有类似 Flex 的 row-reverse，但你可以用 direction: rtl 配合 justify-content 控制子项在行内的排列起点：
-
justify-content: start在 RTL 下等效于右对齐（因为 start 是逻辑起点，即视觉右侧） -
justify-content: end在 RTL 下反而变成左对齐 - 若要实现“三个按钮右对齐、两个按钮靠右挤、一个按钮贴右”，推荐组合：
display: grid; grid-template-columns: repeat(3, 1fr); justify-content: start; direction: rtl; - 注意：此法仅影响单行内子项的水平分布，不改变多行时的换行顺序（
grid-auto-flow: row仍从上到下）
真正需要镜像的属性必须手动替换为逻辑属性
物理属性如 margin-left、padding-right、float: left 在 RTL 下会出错——它们不会随 direction 自动切换。正确做法是全部改用逻辑属性：
- 用
margin-inline-start替代margin-left（RTL 下自动作用于视觉右侧） - 用
padding-inline-end替代padding-right - 用
float: inline-start替代float: left - 避免混用
:dir(rtl)和[dir="rtl"]，前者依赖浏览器推断（Safari ≤15.3 不可靠），后者需显式写dir="rtl"才生效
根元素 dir="rtl" 必须设在 <html> 上，否则光标、选中、滚动条全乱
局部设置（比如只给 <div dir="rtl">）会导致 Safari 光标跳错、双击选词反向、屏幕阅读器无法调用阿拉伯语音规则。只有 <html dir="rtl" lang="ar"> 才能触发浏览器完整 RTL 行为栈——包括表单光标移动、文本选中顺序、滚动条位置、复制粘贴逻辑。SSR 渲染时若未注入 dir 属性，:dir(rtl) 选择器也会失效。
立即学习“前端免费学习笔记（深入）”；
复杂点在于：Grid 轨道本身不可逆，所谓“RTL 网格”其实是靠逻辑属性 + direction + 根级 dir 三者协同完成的镜像效果；漏掉任一环，就只剩视觉错位。
