小屏下 grid-template-columns 不生效，主因是媒体查询未覆盖初始样式或侧边栏未真正从网格中移除；需确保媒体查询位置靠后、选择器权重足够，并同步重定义网格列与侧边栏尺寸及定位。
grid-template-columns 在小屏下不生效？检查媒体查询是否覆盖了初始定义
直接写 grid-template-columns: 250px 1fr 后加 @media (max-width: 768px) 却发现侧边栏还在、主内容没占满——大概率是 CSS 加载顺序或选择器权重问题。媒体查询里的规则必须能实际覆盖默认样式，不能被更具体的选择器（比如 .sidebar-layout .sidebar）意外压住。
实操建议：
- 把媒体查询块放在整个 CSS 文件末尾，避免被后续样式覆盖
- 初始容器用简洁类名（如 .layout），别嵌套太深
- 小屏断点统一用 max-width: 767px（而非 768px），避开 iPad 竖屏等临界设备的像素渲染误差
- 检查 DevTools 的“Computed”面板，确认生效的 grid-template-columns 值是不是你预期的 1fr
侧边栏在手机上被压成细线？别只改 grid-template-columns
写完 @media (max-width: 767px) { grid-template-columns: 1fr; }，侧边栏确实“没了”，但它的 DOM 还在网格里占位，且可能因 width: 250px 或 min-width: 250px 被强制压缩，导致文字溢出、输入框变形。
实操建议：
- 小屏下必须同步设 .sidebar { grid-column: 1; width: auto; min-width: 0; }，解除固定宽约束
- 如果侧边栏含搜索框，加 input, select { width: 100%; box-sizing: border-box; }
- 避免对侧边栏单独设 flex 或 float，Grid 容器内这些属性会被忽略，还可能触发意外重排
想让侧边栏滑入滑出？别用 display: none 切换
用 display: none 控制侧边栏显隐，主内容不会自动拉宽——Grid 轨道依然存在，只是内容不可见。用户点击按钮后看到空白，或者焦点卡在隐藏区域。
实操建议：
- 小屏默认状态：给侧边栏加 transform: translateX(-100%); 和 position: fixed;，让它物理移出视口
- JS 切换时只操作一个类（如 .sidebar--open），里面只写 transform: translateX(0);
- 必须配 transition: transform 0.3s ease;，并加 will-change: transform; 防 iOS 滑动卡顿
- 不要用 left: -250px 动画——它触发 Layout，比 transform 性能差一个数量级
平板横屏/竖屏切换错乱？断点得按设备行为分层写
iPad 横屏（1024×768）适合双栏，竖屏（768×1024）却常被误判为“小屏”而切单列——结果用户转个屏，布局跳变，体验断裂。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 区分方向：用 @media (min-width: 768px) and (orientation: landscape) 单独处理横屏双栏
- 竖屏平板仍用双栏，但侧边栏宽度缩到 minmax(200px, 25%)，防止撑满
- 主内容列始终用 1fr，别在媒体查询里改成 auto 或固定值，否则弹性逻辑就断了
- 所有涉及 grid-template-columns 的变更，必须同步更新 grid-template-areas（如果用了），否则子元素可能掉出网格
侧边栏响应式真正的复杂点不在怎么写 CSS，而在「什么时候该让 Grid 知道这列不存在了」——靠 display: none 是骗不过 Grid 的，靠 transform 是绕过它，而靠媒体查询重定义 grid-template-columns 才是真正告诉 Grid：这一列，现在归零了。
