最稳的响应式网格布局是用 grid-template-areas 配合媒体查询重排：移动端显式声明单列区域堆叠，桌面端改为二维结构，保持 DOM 顺序与语义不变；慎用 grid-auto-flow: dense，优先用 repeat(auto-fit, minmax()) 定义自适应列。
直接用 grid-template-areas 配合媒体查询重排，比靠 order 或 grid-column 手动挪位置更稳、更易维护。
移动端线性布局必须显式声明 grid-template-areas
很多人漏掉这一步，只写 display: grid 和 grid-template-columns，结果所有子元素挤在第一行。移动端要堆叠，就得让每个区块独占一行：
-
.hero { grid-area: hero; }、.title { grid-area: title; }这类声明一个都不能少 - 容器上写
grid-template-areas: "hero" "title" "price" "specs" "desc" "related";，顺序即渲染顺序 - 不设
grid-area的元素不会被区域名捕获，会被丢进隐式网格，导致错位
桌面端重排只改 grid-template-areas 值，不动 HTML 和子项样式
这是最干净的响应式策略——DOM 顺序不变，语义和可访问性不受影响，仅靠 CSS 控制视觉流：
- 桌面断点里把
grid-template-areas改成"hero hero" "title price" "specs specs" "desc desc" "related related"这类二维结构 - 如果需要侧边栏右置，就写
"hero hero" "title price" "desc sidebar" "related related" - 注意：所有用到的区域名（如
sidebar）必须在子元素上真实存在grid-area: sidebar
grid-auto-flow: dense 不是万能解，慎用于图文交错场景
它会让被移位的项“回填”空轨道，但容易引发意外覆盖或错行，尤其当内容高度不一致时：
立即学习“前端免费学习笔记（深入）”；
- 仅在明确需要填空（比如卡片网格中某些项
display: none）时启用 - 图文交错布局中，
nth-child(4n)定位文字、nth-child(4n-1)定位图片，再配grid-column: 1 / span 6和7 / span 6，比依赖dense更可控 - 如果用了
dense却没控制好grid-row，小屏下可能因高度差异导致某张图盖住下一段文字
列定义优先用 repeat(auto-fit, minmax())，别硬写固定列数
写死 grid-template-columns: 1fr 1fr 1fr 在手机上必然溢出，而 minmax() 能让列宽有底线也有弹性：
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));是通用安全写法 -
auto-fit比auto-fill更适合内容不固定的卡片流——它会收缩空轨道，避免留白 - 配合
gap控制间距，别用margin；gap是容器级属性，换行/重排时不会多出意外空白
真正难的不是怎么写断点，而是区域命名是否语义清晰、是否贯穿所有断点；一旦 grid-area: cta-button 在桌面端被误写成 grid-area: action，整个区域就失效了。
