CSS Grid在平板横屏模式下失效，侧边栏无法移动到main左侧

• 校验媒体查询的匹配规则
  平板横屏的常规适配范围是768px ~ 1024px且屏幕方向为landscape，先确认你的媒体查询条件没有和其他断点重叠导致样式被覆盖：
  • 同权重的CSS规则后面的优先级更高，要将横屏平板的媒体查询放在竖屏平板规则之后、桌面端规则之前
  • 可以给媒体查询加上明确的最大宽度限制，比如@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)，避免被更大屏幕的规则覆盖
• 检查网格容器的列定义规则
  确认横屏场景下grid-template-columns的设置没有逻辑冲突：
  • 如果你混合使用fr、固定像素、百分比单位，要计算总宽度是否超出了父容器的可用宽度
  • 如果用了repeat(auto-fit, minmax(xxx, 1fr))的自适应写法，确认xxx的最小宽度没有设置过大，导致一行放不下你预期的列数
  • 不要给网格子项设置过大的固定min-width，会挤压其他列的分配空间
• 排查侧边栏显示异常问题
  侧边栏无法正常显示通常是三个原因：
  • 横屏样式里没有给侧边栏正确设置grid-column跨列属性，导致被挤到下一行或者被其他元素覆盖
  • 其他断点的display: none规则被错误命中，优先用开发者工具选中侧边栏元素，查看生效的样式列表
  • 侧边栏内容宽度超出了你设置的列宽，加上了overflow: hidden导致内容被裁切
• 快速定位工具
  直接用浏览器开发者工具的设备模拟器切换到平板横屏模式，选中网格容器后打开「布局」面板开启Grid高亮，能直观看到每一列的实际宽度、分配逻辑，以及子项的占位范围，1分钟就能定位到是哪条样式未生效或者被覆盖。

内容的提问来源于stack exchange，提问作者Nima Zarei