侧边栏小屏错位是因未解除固定宽约束与网格定位耦合。必须在@media (max-width: 767px)中显式改grid-template-columns为1fr，并同步设.sidebar{grid-column:1;width:auto;min-width:0}，且禁用float/flex；滑入滑出须用transform+fixed而非display:none。
侧边筛选栏在小屏上被压扁或错位，不是 Grid 写错了，而是没切断固定宽约束和网格定位的耦合关系。
grid-template-columns 写 250px 1fr 后，小屏为啥还是两列？
因为 grid-template-columns 只定义“怎么分”，不定义“什么时候分”。写死 250px 1fr 后，媒体查询里没重写它，浏览器就一直按这个分——哪怕屏幕只有 320px，它也硬把 250px 塞进去，剩下 70px 给主内容，导致侧边栏文字溢出、输入框变形。
- 必须在
@media (max-width: 767px)里显式覆盖：把grid-template-columns: 250px 1fr改成grid-template-columns: 1fr - 断点统一用
max-width: 767px，避开 iPad 竖屏（768×1024）等临界设备的像素渲染误差 - 检查 DevTools 的 “Computed” 面板，确认生效的
grid-template-columns值是不是你写的1fr，而不是被更高权重的选择器覆盖了
侧边栏在小屏下变成一条细线，怎么让它正常显示？
Grid 容器改成了单列，但侧边栏 DOM 还在，且自带 width: 250px 或 min-width: 250px，结果被强行压缩。这不是布局问题，是尺寸约束没清理干净。
- 小屏下必须同步加：
.sidebar { grid-column: 1; width: auto; min-width: 0; } - 里面所有
<input>、<select></select>要设width: 100%; box-sizing: border-box;，否则内边距会让它们撑破容器 - 别给侧边栏加
float或display: flex—— Grid 容器内这些属性会被忽略，还可能触发意外重排
想让侧边栏滑入滑出，为什么 display: none 不行？
display: none 只隐藏内容，不释放网格轨道。主内容区仍被挤在第二列，留出空白，用户点开汉堡菜单看到的是空隙，不是内容延展。
- 正确做法：默认状态用
transform: translateX(-100%)+position: fixed把侧边栏物理移出视口 - JS 切换只操作一个类，比如
.sidebar--open，里面只写transform: translateX(0) - 必须配
transition: transform 0.3s ease和will-change: transform，否则 iOS 滑动卡顿
筛选按钮点击后子菜单不展开，CSS 里能解决吗？
纯 CSS 实现筛选联动，关键不是控制 DOM 显隐，而是让商品卡片自己响应状态。靠 :has() + 自定义属性，比 JS 增删 class 更轻量、更可控。
- 给筛选按钮设
data-filter="category-shoes"，激活时加aria-checked="true" - 商品卡片用
[data-category="shoes"]标记，再写规则：.products > *:not(:has([aria-checked="true"][data-filter="category-shoes"])) { display: none; } - 注意：
:has()在 Safari 15.4+、Chrome 105+ 才支持，旧版需降级为 JS 控制
真正难的不是写几行 grid-template-areas，而是让侧边栏在不同断点下既保持交互可用性，又不破坏主内容流——这要求你同时盯住容器高度、子元素最小宽、输入框盒模型、以及 transform 动画的 will-change 触发时机。漏掉任意一环，用户在真机上滑动时就会卡顿或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
