能跑起来但易错位，因漏掉三处约束：替换元素需 min-width: 0、小屏需重置 grid-column 或 grid-area、主内容需高度链路闭环（根容器+grid容器+主区域均设高度）。
直接用 grid-template-columns: 250px 1fr 能跑起来，但真到 iPad 竖屏、Chrome 移动调试器或长筛选项出现时，大概率会错位、撑出、双滚动条——这不是写法错了，是漏掉了三处关键约束。
侧边栏固定宽度但实际缩不下去？检查 min-width: 0 和替换元素行为
搜索过滤栏里常含 <input>、<select></select> 这类替换元素，它们有浏览器默认的固有最小宽度（如 Chrome 下 <input> 约 120px）。哪怕你写了 grid-template-columns: 250px 1fr，它也不会缩进 250px 栏内，反而把整个侧边栏撑宽，主内容被挤窄甚至触发横向滚动。
- 给搜索框、下拉框等显式加
min-width: 0（不是min-content，Safari 对后者支持不稳） - 确认父容器没设
white-space: nowrap或min-width类（比如 Tailwind 的min-w-64） - 别对输入框写
width: 100%—— 它和 Grid 的 track 分配逻辑冲突，反而让收缩失效
小屏下侧边栏不自动上移？光改列数不够，得重置 grid-column 或 grid-area
只在媒体查询里把 grid-template-columns 改成 1fr，Grid 不会自动把原第一列的筛选栏“挪到主内容上方”。它仍按原始列轨道渲染，可能叠在主内容左上角，或留出大片空白。
- 想让筛选栏独占整行：给它加
grid-column: 1 / -1或用grid-area配合grid-template-areas重定义布局 - 想放在底部：加
order: 1并确保主内容order: 0 - 千万别只靠
display: none隐藏侧边栏——主内容不会自动拉宽，结构缺陷会立刻暴露
主内容区滚动异常或高度拉不满？查清三处高度链路
搜索页需要侧边栏固定、主内容独立滚动。Grid 默认不提供滚动隔离，常见现象是：整个页面滚、侧边栏跟着动；或主内容空白一片，1fr 完全没生效。
- 根容器（如
或最外层div）必须有高度来源：min-height: 100vh或height: 100%，且所有父级不能是height: auto - Grid 容器自身需设
height: 100%或min-height: 100vh，否则1fr在垂直方向无参考基准，退化为内容高度 - 主内容区域（如
<main></main>）加overflow-y: auto和明确高度约束，例如height: calc(100vh - 60px)；同时删掉align-self: start类样式，让它默认拉满
真正容易被忽略的是 fr 的计算逻辑：它分的不是“容器宽减 250px”，而是扣掉 gap、所有列的 min-content 后剩下的部分。一个未设 overflow-wrap: break-word 的长 URL 或未截断的标签名，就能让侧边栏实际可用空间骤减——这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
