移动端Grid适配需主动重定义grid-template-areas和grid-template-columns，否则浏览器静默丢弃规则退化为单列流；必须同步更新区域字符串、行列定义及grid-area声明，缺一不可。
移动端适配不是“让 Grid 自动缩放”，而是主动重定义 grid-template-areas 和 grid-template-columns，否则布局会静默退化成单列流——浏览器不报错，但页面看起来像塌了。
为什么 grid-template-areas 在小屏下“突然失效”
不是 Grid 崩了，是你改了区域字符串但没同步更新行列定义，或者漏写了 display: grid。浏览器直接丢弃整条 grid-template-areas 声明，退回到文档流。
- 常见错误：桌面端写
"nav main aside"，小屏改成"nav" "main"→ 每行词数不一致（1 vs 2），整条规则被忽略 - 漏掉
grid-template-columns: 1fr，即使grid-template-areas写对了，容器也没列轨道，所有子元素挤在第一列 - 父容器没设
display: grid，或被float、position: absolute干扰，Grid 上下文丢失
怎么用 Media Queries 安全地重排 grid-area 区域
区域名本身不能重定义，但 grid-template-areas 字符串可以在媒体查询中完全重构——这才是语义清晰、可维护的重排方式。
- 移动端优先写法：默认设为垂直堆叠
grid-template-areas: "header" "nav" "main" "aside" "footer"，大屏再用@media (min-width: 768px)改回三栏 - 收起侧栏时，不要用
display: none隐藏aside，而是在媒体查询中把它从字符串里移除，例如"header" "nav" "main" "footer"—— 这样它不参与布局，也不破坏区域映射 - 确保所有断点里
grid-area声明保留（如aside { grid-area: aside; }），只是对应区域名不出现在新字符串中；否则该元素会掉进grid-auto-flow默认流，位置不可控
移动端适配时侧栏宽度和主内容怎么设才不溢出
硬写像素值（如 200px）在小屏下极易触发横向滚动；全用 1fr 又会让侧栏被压缩到不可读。关键是用 minmax() 控制弹性边界。
立即学习“前端免费学习笔记（深入）”；
- 导航栏：
minmax(200px, 240px)—— 最小保操作空间，最大防过宽 - 主内容：
1fr（不是auto），否则容器高度塌陷，footer上浮 - 右侧边栏（若保留）：
minmax(280px, 0.6fr)，比主内容窄，避免窄屏下喧宾夺主 - 别混用
fr和auto在同一行：比如200px auto 200px会让中间列收缩到内容最小宽度，主内容含长表格时直接撑破布局
调试时 computed 样式里 grid-area 显示为 auto 怎么办
说明该元素未被识别为网格项，常见原因不是语法错，而是宿主或上下文被破坏。
-
display: contents会让父容器“消失”，子元素直接受上级网格约束，此时在它身上写的grid-area就失效了 - 元素没加
grid-area，Grid 会按 DOM 顺序自动填入，破坏区域映射 - 父容器没设
display: grid，或者被其他样式干扰，导致 Grid 上下文丢失 - 区域名大小写不匹配：
aside和Aside是不同区域；也不能带引号写成grid-area: "aside"，CSS 解析失败
最常被忽略的其实是三件事同步：改 grid-template-areas 字符串、调 grid-template-columns、保 grid-area 声明——缺一不可，少一个就“看不见布局”。
