grid-template在横竖屏切换时失效，主因是orientation媒体查询仅对真实移动端有效且需方向权限，桌面端应优先用宽高媒体查询；横竖屏需分别设置完整grid-template值，firefox对换行敏感须写单行。
grid-template 在横竖屏切换时失效？检查媒体查询触发条件
很多开发者以为只要写了 @media (orientation: landscape)，CSS Grid 就会自动重排，结果横屏后布局没变——根本原因是 orientation 媒体查询在桌面浏览器里基本不触发，它只对真实移动端设备（或模拟器）有效，且依赖系统方向传感器。桌面端 resize 更可靠。
- 真机调试时，确保开启了设备方向权限（Safari iOS 需手动允许）
- 开发阶段优先用
@media (min-width: 768px)或@media (max-height: 480px)模拟横/竖屏边界 - 避免混用
orientation和aspect-ratio，后者兼容性差（Chrome 109+ 才稳定支持）
grid-template-columns/rows 要重写全量值，不能只改某一项
CSS Grid 的 grid-template 是一个简写属性，浏览器不会“合并”新旧值。如果你在竖屏设了 grid-template: "a b" / 1fr 1fr，横屏只写 grid-template-columns: 2fr 1fr，那整个模板就丢了，回到默认的 grid-template: none 状态。
- 横竖屏必须各自提供完整
grid-template值，比如：grid-template: "header header" "main sidebar" / 1fr 300px;
- 如果只是列数变化，用
grid-template-areas+grid-template-columns组合更安全 - 动态改
grid-template-rows时，注意 auto-fit/auto-fill 容器需有明确高度，否则行高塌陷
JavaScript 强制重排 grid-template 可能引发 layout thrashing
有人用 window.addEventListener('resize', () => { el.style.gridTemplate = '...' }) 实现响应式，但频繁触发会导致强制同步布局（layout thrashing），尤其在低端安卓机上卡顿明显。
- 加防抖：用
requestAnimationFrame包一层，只在下一帧更新 - 优先用 CSS 媒体查询，JS 只处理 orientation 切换后的兜底逻辑（比如 Safari iOS orientation 不触发时 fallback）
- 避免在
scroll或input里改grid-template，它不是为高频变更设计的
Firefox 对 grid-template 字符串中空格和换行敏感
Firefox 会把多行字符串里的换行符当普通空白处理，导致 grid-template-areas 解析失败；而 Chrome 和 Safari 会忽略换行。写成单行最稳妥。
- 错误写法：
grid-template-areas: "header header"<br> "main sidebar";
- 正确写法：
grid-template-areas: "header header" "main sidebar";
- 用 CSS 预处理器（如 Sass）拼接字符串时，确保生成的是无换行的单行值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
