grid-template-columns 在 rtl 下不会自动翻转，列轨道定义保持不变；真正变化的是网格项的放置起点、对齐行为及自动流方向，需手动用[dir="rtl"]重写列值或调整 grid-column/order 控制视觉顺序。
grid-template-columns 在 RTL 下会自动翻转吗
不会。CSS Grid 的 grid-template-columns 值本身完全不受 dir="rtl" 或 direction: rtl 影响——你写 1fr 2fr 1fr，列就从左到右按这个顺序排列，哪怕容器是 RTL。
真正翻转的是「网格项的放置起点」和「行内布局方向」，不是列轨道定义。这意味着：你靠 grid-column-start、grid-area 这类基于线号的定位，行为在 RTL 下依然稳定；但靠 justify-content: start/end 或 text-align 这类依赖书写方向的对齐，效果会变。
- RTL 容器中，
justify-content: start对齐到右边（因为 start 指向 RTL 的起始侧） -
grid-column: 1 / -1仍从最左轨道线到最右轨道线，但“最左”在视觉上是右侧（因坐标系未翻转） - 如果你用
grid-auto-flow: column+grid-auto-columns，新增列仍按代码顺序从左往右追加，视觉上却像从右往左“冒出来”
如何让网格列视觉顺序在 RTL 下真正翻转
得手动干预。最直接的方式是用逻辑属性配合 dir 切换，或用 CSS 自定义属性 + :root 作用域做条件控制。
推荐用 grid-template-columns 配合 [dir="rtl"] 选择器重写：
立即学习“前端免费学习笔记（深入）”；
body {
--cols: 1fr 2fr 1fr;
}
[dir="ltr"] .grid { grid-template-columns: var(--cols); }
[dir="rtl"] .grid { grid-template-columns: 1fr 2fr 1fr; }
等等——这没变？对，上面只是示例占位。真正要翻转，得把值反过来写：
[dir="rtl"] .grid { grid-template-columns: 1fr 2fr 1fr; }
❌ 错。正确是：
[dir="rtl"] .grid { grid-template-columns: 1fr 2fr 1fr; }
✅ 不，还是错。你看反了：原始是 1fr 2fr 1fr（左→中→右），RTL 视觉翻转后应为 1fr 2fr 1fr（右→中→左），也就是值不变，但……等等，又绕回去了。
结论：列轨道定义不翻，想“视觉翻转”，本质是交换第 1 列和第 3 列的内容位置。所以更靠谱的做法是——别动 grid-template-columns，改用 order 或 grid-column 控制子项位置：
- 给每个网格项加
grid-column显式定位，比如item-1在 LTR 是grid-column: 1，RTL 下设为grid-column: 3 - 用
order配合[dir="rtl"]：LTR 下item-a { order: 1; }，RTL 下[dir="rtl"] item-a { order: 3; } - 如果列数固定且对称，可直接用
flex-direction: row-reverse替代 Grid，但会丢失二维能力
grid-auto-flow: column 在 RTL 下的行为陷阱
这是最容易踩坑的点：grid-auto-flow: column 让 Grid 按列优先填充，但它的“列增长方向”由 writing-mode 和 direction 共同决定，不是简单左右翻转。
默认 writing-mode: horizontal-tb + direction: rtl 时，新列会从右往左添加（即轨道线编号 1 在最右），但你写的 grid-column: 1 仍指“第一条轨道线”，它在 RTL 下就是最右边那条。
- 结果：元素看似从右往左出现，但用
grid-column: 1 / 2定位时，你得知道“1”现在在右边 - 调试技巧：临时加
border和place-items: center，用浏览器开发者工具看轨道线编号标签 - 兼容性注意：Safari 对
grid-auto-flow: column+ RTL 的支持曾有 bug（v15.4 前），表现为列顺序错乱或忽略direction
用 :dir() 伪类替代 [dir="rtl"] 更稳妥吗
是，但仅限现代浏览器。:dir(rtl) 能匹配任何被 UA 判定为 RTL 的元素（包括由 Unicode 字符推断的，不依赖 dir 属性），语义更准。
不过目前（2024 年中）仍有两个现实约束：
- Firefox 支持
:dir()，Chrome/Safari 仅支持:dir(rtl)和:dir(ltr)，不支持其他值 - 若父容器
dir="rtl"，但某个子元素显式设dir="ltr"，:dir(rtl)不会命中该子元素——这点和属性选择器一致 - 构建工具（如 PostCSS）可能不识别
:dir()，导致压缩或转换时报错，需配postcss-dir-pseudo-class插件
所以线上项目仍建议优先用 [dir="rtl"]，明确、可控、无兼容风险。只有当你需要响应浏览器自动判断的 RTL 文本（比如用户粘贴了一段阿拉伯文），才考虑 :dir(rtl)。
复杂点在于：Grid 的 RTL 行为不是单一开关能切的，它是书写模式、文本方向、盒模型、自动流、对齐方式多个层叠在一起的结果。最容易被忽略的，是以为改了 direction 就万事大吉，结果发现 justify-content 和 grid-column 的“start”“end”“1”“-1”全在悄悄换含义。
