grid-template-columns: 250px 1fr 是布局起点，需配合 min-width: 0、媒体查询重定位、高度链路控制及 fr 剩余空间理解才能实现真正自适应。
grid-template-columns: 250px 1fr 是起点，不是终点
直接写 grid-template-columns: 250px 1fr 能让侧边栏固定、主内容自适应，但搜索过滤页的“自适应”不只是宽度分配——它要应对输入框缩放、长筛选项换行、小屏收起、滚动隔离等真实场景。这个声明只是布局骨架，后面每一步漏掉都可能让页面在 iPad 竖屏或 Chrome 移动调试器里错位。
搜索框崩塌？大概率是没设 min-width: 0
<input> 是替换元素，默认有约 120px 的固有最小宽度，哪怕你写了 1fr，它也不会缩到比这更小。结果就是窄容器里输入框撑出侧边栏、主内容被挤窄甚至横向滚动。
- 给搜索框显式加
min-width: 0（不是min-width: min-content，后者在 Safari 下行为不稳） - 确保父容器没设
white-space: nowrap或min-width类约束 - 别对搜索框设
width: 100%—— 它和 Grid 的 track 分配逻辑冲突，反而导致收缩失效
侧边栏在小屏上不收起？媒体查询得配 grid-column 重定位
只改 grid-template-columns: 1fr 不够。Grid 不会自动把原第一列的侧边栏“塞进主内容上方”，它默认仍按原列轨道渲染，可能错位或叠在一起。
- 在
@media (max-width: 768px)里加.sidebar { grid-column: 1; }，让它独占整行 - 如果想让它出现在顶部，再加
order: -1；想放在底部就用order: 1 - 千万别只靠
display: none隐藏侧边栏——主内容不会自动拉宽，留白会暴露结构缺陷
滚动异常、双滚动条、高度拉不满？检查三处高度链路
侧边栏固定、主内容独立滚动是搜索页刚需，但 Grid 默认不提供滚动隔离。常见现象：整个页面滚、侧边栏跟着动；或主内容空白一片。
- 根容器（如
或最外层 wrapper）必须有高度来源：min-height: 100vh或height: 100%（且其所有父级不能是height: auto） - Grid 容器自身需设
min-height: 100%或height: 100%，否则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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
