grid-template-columns 在 rtl 下不会自动反转，需用 :dir(rtl) 显式交换列序或 css 变量；justify-self/start/end 随 direction 自动映射逻辑方向，而 line 编号始终从 start 边递增。
grid-template-columns 在 RTL 下不会自动反转
CSS Grid 的列定义（比如 grid-template-columns: 1fr 2fr 100px）本身是“书写方向无关”的——它按你写的顺序从左到右排，不管 dir="rtl" 还是 dir="ltr"。所以即使页面设了 RTL，第一列还是出现在最左边，不是最右边。
真正起作用的是 direction 和 text-align 对齐行为，但它们不改变轨道顺序。要让 Grid “视觉上反转”，得靠显式翻转轨道定义或利用 rtl 上下文下的逻辑属性。
- 别指望
dir="rtl"自动把grid-template-columns里写的顺序倒过来 - 如果用
fr单位配合justify-content: end，只会影响内容对齐，不移动轨道位置 - 最稳妥的方式：在 RTL 环境下，手动交换列定义顺序（例如从
"1fr 2fr"改成"2fr 1fr"），或用 CSS 变量 +:dir(rtl)切换
:dir(rtl) 是切换 Grid 布局的推荐方式
:dir(rtl) 伪类比 [dir="rtl"] 更可靠，它能响应系统级 RTL 设置（比如浏览器语言、操作系统偏好），且支持嵌套方向变化。用它来覆盖 Grid 的列/行定义，是最接近“自动适配”的做法。
注意：IE 不支持 :dir()，如需兼容，得回退到 [dir="rtl"] 或 JS 检测。
- 写法示例：
.grid { display: grid; grid-template-columns: 1fr 2fr; } .grid:dir(rtl) { grid-template-columns: 2fr 1fr; } - 如果有多列，建议用 CSS 变量统一管理：
--col-a: 1fr; --col-b: 2fr;，然后在:dir(rtl)里交换变量值 - 别在
:dir(rtl)里只改direction或text-align，那对 Grid 轨道布局没影响
justify-items / justify-self 在 RTL 下的行为差异
justify-items 和 justify-self 的 start/end 值会随 direction 自动映射：在 RTL 下，start 指向右，end 指向左。这点和 Flexbox 一致，但容易被忽略。
问题常出在硬编码 left/right —— 它们是物理方向，不响应 RTL；而 start/end 是逻辑方向，才该优先使用。
- ✅ 正确：
justify-self: end→ RTL 下靠右对齐 - ❌ 错误：
justify-self: right→ 总是物理右，RTL 下反而错位 - 同理，
justify-items: start比justify-items: left更安全 - 如果用了
grid-auto-flow: column，justify-content控制的是列容器内轨道的水平分布，此时start/end同样按当前dir解析
RTL 下 grid-column-start / grid-column-end 的数值逻辑不变
grid-column-start: 2 在 RTL 下仍然是“从第 2 条线开始”，线号顺序不会因为 RTL 反转。Grid 线编号始终从容器起始边（start 边）往结束边（end 边）递增，而起始边由 direction 决定。
也就是说：LTR 下起始边是左，RTL 下起始边是右，但线号依然从 1 开始往对面数。这会让 grid-column: 2 / 4 在 RTL 下看起来像“从右往左跨两格”，但本质是编号逻辑一致，只是起点变了。
- 不用重写所有
grid-column值来适配 RTL，除非你刻意想改变元素落点 - 如果用命名线（如
grid-column: sidebar / main），命名线的位置会随direction移动，但名字本身不变 - 调试时可用浏览器开发者工具的 Grid 面板，勾选 “Show line numbers” 直观看线号方向
start/end 的映射关系——它们看着像自动适配，实则各有一套规则，混用物理值和逻辑值是出 bug 的高发区。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
