加 min-width: 0 破除表单控件默认最小宽度；小屏需用 grid-column: 1 / -1 或 order 调整布局；fr 高度需父容器设 height/min-height；grid-auto-flow: dense 仅对未显式定位项生效。
侧边栏输入框撑宽导致错位？加 min-width: 0 破除固有宽度约束
搜索筛选栏里塞了 <input>、<select></select>，哪怕你写了 grid-template-columns: 250px 1fr，它也不会缩进 250px 栏里——因为这些替换元素在 Chrome/Firefox 下有默认最小宽度（约 120–160px），直接把整栏撑开，主内容被挤窄甚至触发横向滚动。
必须显式给所有表单控件加 min-width: 0；不要用 min-content，Safari 对它支持不稳。同时检查父容器是否误加了 white-space: nowrap 或 min-w-64 类，也别对输入框写 width: 100%，它会和 Grid 的 track 分配逻辑冲突，反而让收缩失效。
小屏下筛选栏没上移到顶部？光改 grid-template-columns 不够
只在媒体查询里把 grid-template-columns 改成 1fr，Grid 不会自动把原第一列的筛选栏“挪到主内容上方”。它仍按原始列轨道渲染，可能叠在左上角，或留大片空白。
要让它独占整行：给筛选栏加 grid-column: 1 / -1；想放底部：加 order: 1 并确保主内容 order: 0。千万别只靠 display: none 隐藏侧边栏——主内容不会自动拉宽，结构缺陷立刻暴露。
主内容区高度塌陷或滚动异常？查清三处高度链路
常见现象：整个页面滚、侧边栏跟着动；或主内容一片空白，1fr 完全没生效。根本原因是 fr 单位需要明确的高度参考基准，而它默认没有。
- 根容器（如
或最外层<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类样式
筛选项高度不一导致空隙？grid-auto-flow: dense 不是万能开关
加了 grid-auto-flow: dense 但仍有明显空隙，尤其在有 grid-row-end: span 2 的项后面——这是因为 dense 只对**未显式定位**的项生效。如果你给每个筛选项都写了 grid-row 或 grid-column，那它完全不参与计算。
真正起效的前提是：至少部分项“放养”，让浏览器决定初始落点；且存在可被填充的空洞（比如一个高筛选组 + 后面多个矮单项）。若语义顺序敏感（如屏幕阅读器），慎用 dense——它会打乱 DOM 顺序，造成读取错乱。更稳的替代是手动用 grid-template-areas 规划区域，或 JS 控制 grid-row 动态分配。
真正难的不是加属性，而是判断哪些项该锁定位置、哪些该交由自动流处理，以及是否愿意为视觉紧凑牺牲可访问性链路。
