css grid搜索页布局错位、撑出、双滚动条的根源在于漏掉三处关键约束：替换元素需min-width: 0、小屏需重置grid-column或grid-area、主内容需高度链路闭环（根容器+grid容器+主区域均设高度）。
搜索页布局用 CSS Grid 能跑通，但真上线后在 iPad 竖屏、Chrome 移动调试器或长筛选项出现时，大概率错位、撑出、双滚动条——问题不在写法，而在漏掉三处关键约束。
侧边栏里的 <input> 和 <select></select> 为什么缩不进 250px？
替换元素（如 <input>、<select></select>）有浏览器默认最小宽度（Chrome 下 <input> 约 120px），哪怕你写了 grid-template-columns: 250px 1fr，它也不会收缩，反而把整列撑宽，挤窄主内容区。
- 给所有筛选控件显式加
min-width: 0（不是min-content，Safari 对后者支持不稳） - 检查父容器是否误设了
white-space: nowrap或min-w-64类（Tailwind 常见） - 删掉
width: 100%—— 它和 Grid 的 track 分配逻辑冲突，反而让收缩失效
小屏下筛选栏没上移到主内容上方，只改 grid-template-columns 为什么不行？
Grid 不会自动“重排”元素位置。只把列数从 250px 1fr 改成 1fr，筛选栏仍按原第一列轨道渲染，可能叠在左上角，或留大片空白。
- 想让它独占整行：给筛选栏加
grid-column: 1 / -1，或配合grid-template-areas重定义为"filters"单行区域 - 想放到底部：加
order: 1，同时确保主内容order: 0 - 别用
display: none隐藏侧边栏——主内容不会自动拉宽，结构缺陷立刻暴露
主内容区滚动异常、高度拉不满，1fr 为什么没生效？
1fr 在垂直方向需要明确的高度参考基准。缺任何一环，它就退化为内容高度，导致整个页面滚、侧边栏跟着动，或主内容空白一片。
- 根容器（如
或最外层<div>）必须有高度来源：<code>min-height: 100vh或height: 100%，且所有父级不能是height: auto - Grid 容器自身需设
height: 100%或min-height: 100vh - 主内容区域（如
<main></main>）加overflow-y: auto和高度约束，例如height: calc(100vh - 60px)；同时删掉align-self: start类样式
真正容易被忽略的是 fr 的计算逻辑：它分的不是“容器宽减 250px”，而是扣掉 gap、所有列的 min-content 后剩下的部分。一个未设 overflow-wrap: break-word 的长单词，就能让整列失守。
