Grid容器加direction: rtl不翻转列顺序，因为direction仅影响文本流和逻辑属性映射，不改变grid-template-columns等物理轨道定义；列序由声明本身决定，需改用逻辑值（如inline-start）或:dir(rtl)配合重写规则。
Grid容器加direction: rtl不翻转列顺序，为什么？
直接给.grid-container设direction: rtl，你会发现grid-template-columns: 1fr 1fr 1fr的三列依然从左到右排列——因为direction只影响文本流和逻辑方向映射，不改变Grid轨道的物理定义顺序。Grid的列序由grid-template-columns声明决定，与书写方向无关。
真正起作用的是dir属性配合逻辑属性，或显式用:dir(rtl)重写布局规则：
-
dir="rtl"放在HTML根元素或网格父容器上，是触发:dir(rtl)匹配的前提 - 必须用
grid-column-start: inline-end这类逻辑值，或改用justify-content: end控制主轴对齐 - 避免硬写
float: left、margin-right等物理方向属性，它们在RTL下不会自动“翻转语义”
如何让Grid列顺序在RTL下真正从右往左排列？
想让第一列出现在右侧、最后一列在左侧（即视觉顺序翻转），不能靠direction，得靠Grid自身的逻辑定位能力：
- 用
grid-auto-flow: column+direction: rtl：此时新生成的列会从右向左填充（但需配合grid-template-rows明确行数） - 更可靠的做法是改用
grid-template-columns: [end] 1fr [middle] 1fr [start] 1fr，再配合:dir(rtl) .grid-container { grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr; } - 或者统一用
grid-column: inline-start / span 1代替grid-column: 1 / span 1，让列始终锚定在当前书写方向的起始侧
justify-items和justify-content在RTL下的行为差异
这两个属性在dir="rtl"环境下表现不同，容易混淆：
立即学习“前端免费学习笔记（深入）”；
-
justify-items: start→ 总是对齐到当前书写方向的起始边（RTL下即右侧） -
justify-content: start→ 对齐整个网格轨道的起始位置（RTL下网格轨道本身未翻转，所以仍是左对齐） - 常见错误：以为
justify-content: flex-end能“把网格推到右边”，其实它只是把内容块挤到轨道末尾，而轨道起点仍在左 - 正确做法：
:dir(rtl) { justify-content: end; }或直接用justify-content: inline-end（更语义化）
图标、按钮、表单控件在RTL Grid中怎么对齐才不翻车？
Grid布局翻转后，内部元素如input、button、SVG图标仍按LTR逻辑渲染，导致光标位置、文字对齐、图标朝向错乱：
-
input[type="text"]和textarea必须单独加dir="rtl"或direction: rtl，父容器的direction不继承 - 返回按钮里的
←箭头，在RTL界面里语义应为“回到起点”，所以该指向右侧；可用transform: scaleX(-1)或替换为→字符 - SVG图标建议用
dir="auto"或text-anchor="end"配合writing-mode，避免依赖direction全局翻转 - 慎用
transform: rotateY(180deg)——它会翻转整个渲染盒，包括点击热区，可能造成可访问性问题
:dir(rtl)选择器比[dir="rtl"]更健壮，但前提是HTML里真有dir属性。最常被忽略的点是：Grid轨道定义（grid-template-areas或grid-column）一旦写死物理序号，就完全绕过了方向感知。 
