用 display: grid 互换 grid-template-rows/columns 可真正翻转行列逻辑，改变文档流与语义顺序；配合 grid-auto-flow: column 和 grid-template-areas 能精准控制复杂布局翻转；JS 应通过 class 切换 CSS 模板，避免 innerHTML 重排；移动端需用 minmax(0, 1fr) 并测试真机。
用 display: grid + grid-template-rows/grid-template-columns 互换实现翻转
行列翻转本质是把原本按行填充的布局，改成按列填充——这正好是 CSS Grid 的强项。别碰 transform: rotate() 或 flex 的各种 hack，它们只转视觉，不改文档流和语义顺序。
常见错误现象：flex-direction: column 看起来像“翻转”，但只是让子项竖排，并未交换行列逻辑；屏幕阅读器仍按原顺序读，键盘焦点顺序也不变。
- 给容器设
display: grid - 原布局若用
grid-template-rows: 1fr 1fr 1fr定义三行，则翻转后应写成grid-template-columns: 1fr 1fr 1fr - 同时删掉或注释掉原来的
grid-template-rows，避免冲突 - 子元素无需加
grid-row/grid-column，Grid 会自动按新模板从左到右、从上到下填充（即原第一行第一列 → 新第一列第一行）
用 grid-auto-flow + grid-template-areas 控制复杂翻转顺序
当元素不是等高/等宽，或需要保留特定区域命名（比如 header / sidebar / main），靠单纯互换 rows/columns 不够用。grid-template-areas 配合 grid-auto-flow: column 是更可控的方式。
使用场景：仪表盘卡片、响应式信息面板、多语言表单字段组——这些地方翻转后仍需保持语义区块完整。
立即学习“前端免费学习笔记（深入）”；
- 先用
grid-template-areas给每个子元素分配命名区域，如"a b c" "d e f" - 翻转后改写为
"a d" "b e" "c f"，即把原每行拆成新每列 - 加上
grid-auto-flow: column，确保新列内子项从上到下排列 - 注意：区域名必须一一对应，漏写或拼错会导致
grid-area失效，浏览器不会报错，但布局会塌
JavaScript 辅助时，别直接操作 innerHTML 重排 DOM
如果翻转需响应用户操作（比如点击按钮切换视图），有人会用 JS 把所有子节点取出来、按列索引重排、再 appendChild 回去。这看似直观，但容易踩坑。
性能影响：频繁 DOM 操作触发重排重绘；兼容性影响：破坏 Vue/React 的响应式绑定或 key 机制，导致状态丢失。
- 优先用 CSS 类切换，比如
container.classList.toggle('flipped')，然后在 CSS 里定义两套 grid 模板 - 若必须 JS 控制，用
Array.from(container.children)获取快照，再用container.append(...newOrder)批量插入（比循环appendChild少触发重排） - 绝对不要用
innerHTML = ...重建结构——事件监听器、表单值、focus 状态全丢
移动端适配时，grid-template-rows 的隐式高度陷阱
在小屏上做行列翻转，常发现内容被截断或高度异常。问题往往出在：原 grid-template-rows: 100px 100px 翻转成 grid-template-columns: 100px 100px 后，容器宽度不够，列被压缩甚至溢出。
容易被忽略的地方：Grid 列宽是相对于容器宽度计算的，而行高是相对于容器高度。翻转后，原来靠高度撑开的空间，现在要靠宽度撑开——但 viewport 宽度通常比高度窄得多。
- 改用
minmax(0, 1fr)替代固定值，比如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 给容器加
overflow-x: auto，允许横向滚动（比内容被裁更可控） - 测试真机，别只信 Chrome DevTools 的模拟尺寸——iOS Safari 对
1fr在窄容器下的解析略有差异
