用 grid-template-areas 重排比改 grid-template-columns 更稳，因其是语义级切换，不依赖容器宽度抖动，也不触发列宽突变；横竖屏本质是视口宽高比剧烈反转，minmax()+auto-fit 只响应宽度变化、对高度无感知，易致图文比例崩坏、卡片错乱；grid-template-areas 通过定义语义区域（如"header main" vs "header" "main"）实现结构级切换，配合 orientation 媒体查询、显式高度约束与命名区域控制子元素流向，才能真正稳健适配。
横竖屏切换时用 grid-template-areas 重排比改 grid-template-columns 更稳，因为它是语义级切换，不依赖容器宽度抖动，也不会触发列宽突变。
为什么不能只靠 minmax() + auto-fit 应对横竖屏
横竖屏本质是视口宽高比的剧烈反转（比如 375×667 → 667×375），而 repeat(auto-fit, minmax(320px, 1fr))) 只响应容器宽度变化，对高度无感知。竖屏下宽度窄，它缩成一列；横屏下宽度变大，它可能铺开成两列——但此时内容高度被严重压缩，图文比例崩坏，卡片堆叠错乱。这不是自适应，是误判。
常见错误现象：
- 横屏后文字行高被压扁，
line-height失效 - 图片
aspect-ratio被网格轨道强行拉伸 - 侧边栏在横屏下突然“掉”到主内容下方，视觉断裂
grid-template-areas 重排才是横竖屏的正确打开方式
它把布局拆解为语义区域（如 "header main" vs "header" "main"），横竖屏切换时不是调尺寸，而是换结构。浏览器会整体重绘区域位置，避免局部列宽跳变。
实操要点：
- 竖屏定义：
grid-template-areas: "header" "nav" "main" "footer" - 横屏定义：
grid-template-areas: "header header" "nav main" "footer footer"（注意每行区域名数量必须一致） - 用
@media (orientation: landscape)切换，而非min-width—— orientation 是设备级信号，不受缩放、iframe 容器干扰 - 所有区域名必须全小写、无空格、无特殊字符，否则整条声明失效，回退到文档流
横屏重排时容易忽略的隐式尺寸继承问题
直接切 grid-template-areas 类名后，常出现横屏下内容区撑爆容器或留白过大的问题，根源是 1fr 高度继承了竖屏时的容器高度。必须显式约束：
- 给横屏区域加
grid-auto-rows: minmax(0, 1fr)，允许其收缩 - 确保父容器有明确高度来源（如
height: 100dvh，不用100vh防 iOS Safari 地址栏遮挡） - 若区域含滚动内容，需设
overflow-y: auto并配min-height: 0，否则1fr不生效 - 避免在横屏规则里混用
grid-template-columns: 200px 1fr—— 这会和grid-template-areas冲突，优先级混乱
真正难的不是写两套 grid-template-areas，而是让横屏区域里的子元素（比如卡片、表单）也同步适配新流向：它们的 grid-column 和 grid-row 声明在重排后可能越界，得统一用命名区域控制，别硬写线号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
