用 grid-template-areas + 媒体查询是最可靠的方式，因它保持 DOM、焦点流、屏幕阅读器顺序与视觉一致，而 order 仅改视觉顺序，破坏可访问性与 SEO，且行为不可预测、不支持 transition。
直接说结论：用 grid-template-areas + 媒体查询是最可靠的方式，order 仅适合微调，且容易在移动端破坏焦点流。
为什么不用 order 做响应式内容优先级？
它只改视觉顺序，不改 DOM、Tab 键序、屏幕阅读器读取顺序。比如你在小屏把侧边栏用 order: -1 提到顶部，键盘用户仍先聚焦导航栏——这不是“内容优先”，是视觉欺骗。
- SEO 和可访问性完全无视
order值 -
grid-auto-flow: column下order行为会按列重分组，结果难预测 - 显式设置了
grid-row或grid-area，order直接失效 - transition 不支持
order，动画只能靠 JS 模拟，增加复杂度
用 grid-template-areas 实现真·内容优先
本质是为不同断点定义不同的区域模板，HTML 结构不变，CSS 控制“哪块内容出现在哪块区域”。语义和视觉完全对齐。
- 桌面端：
grid-template-areas: "header header" "nav main" "footer footer" - 小屏时（
@media (max-width: 768px)）：grid-template-areas: "header" "main" "nav" "footer" - 每个子元素用
grid-area: main等命名绑定，无需写行列线 - 注意：所有命名区域必须在模板中出现，否则该元素会被自动放置到空轨道
如何避免 grid-template-areas 的常见翻车？
模板字符串必须严格对齐，空格和换行都算字符，拼错一个字母或漏引号，整套模板就失效，浏览器回退到 auto-placement。
立即学习“前端免费学习笔记（深入）”；
- 用单引号包裹模板，内部用双引号写区域名（如
'"header" "main"'），避免引号嵌套冲突 - 每行区域数必须一致，不足用
"."占位（如'"header header" "main ."'） - 别在模板里混用
grid-column—— 显式定位和区域模板不能共存 - 测试时打开 Chrome DevTools 的 “Layout” 面板，勾选 “Show area names”，一眼看出区域是否生效
真正的内容优先，不是让眼睛看到的顺序变，而是让结构本身承载意图。模板区域是声明式的，order 是修补式的；前者可控，后者易散。
