应修改断点内 grid-template-columns 为 1fr 并重置 sidebar 样式，商品列表用 repeat(auto-fit, minmax(250px, 1fr)) 实现自适应列数，筛选可用 :has() + CSS 变量纯 CSS 控制显隐。
直接用 grid-template-columns 写死侧边栏宽度 + 主内容区，小屏下侧边栏会被压成一条细线甚至文字溢出——这不是 Grid 不行，是没切断固定宽约束和网格定位的耦合。
侧边筛选栏在小屏上错位或消失，怎么修？
根本原因是 grid-template-columns: 250px 1fr 在小屏仍生效，浏览器硬塞 250px 进去，剩下空间不够主内容显示。必须在断点里显式覆盖列定义，且清理残留尺寸约束：
- 在
@media (max-width: 767px)中把grid-template-columns改为1fr - 同步加
.sidebar { grid-column: 1; width: auto; min-width: 0; } - 侧边栏内所有
<input>、<select>必须设width: 100%; box-sizing: border-box; - 禁用
float或display: flex—— Grid 容器里这些属性无效，还可能触发重排
商品列表要自适应列数，别写一堆媒体查询
用 repeat(auto-fit, minmax(250px, 1fr)) 就够了。它让浏览器自动算列数：宽屏多列、窄屏自动收缩到 1 列，且每列不小于 250px。常见踩坑点：
- 写成
repeat(auto-fill, 250px)→ 列宽被锁死，缩放时内容挤压变形 - 漏掉
minmax()→ 小屏下卡片塌缩，高度失控 - 卡片内部用
float或position: absolute→ 脱离文档流，Grid 高度计算失效 - 图片没设
img { width: 100%; height: auto; object-fit: cover; }→ 拉伸或留白
筛选按钮点击后商品显隐，能纯 CSS 实现吗？
可以，靠 :has() + 自定义属性联动，比 JS 增删 class 更轻量。前提是每个商品有 data-category="shoes"，按钮有 data-filter="shoes"，再配合 CSS 变量暂存当前激活值：
立即学习“前端免费学习笔记（深入）”；
body { --active-filter: all; }
.filter-btn[data-filter="shoes"]:is(:focus-within, :active, .active) { --active-filter: shoes; }
.product-card:not(:has([data-category="shoes"])) { display: none; }（注意：需配合 :has([data-category="shoes"]):not([data-category="shoes"]) { display: none; } 类似逻辑补全，实际中建议用更稳的 [data-category]:not([data-category="shoes"]) { display: none; }）
这个方案依赖现代浏览器支持（Chrome 105+、Firefox 111+、Safari 15.4+），IE 和旧版 Safari 需 fallback 到 JS。
真正难的不是写对 grid-template-columns，而是记住：Grid 容器只管轨道分配，子项自身尺寸、溢出、盒模型才是决定最终渲染的关键。侧边栏滑入滑出要用 transform: translateX() + position: fixed，而不是 display: none —— 后者不释放轨道，主内容区永远被挤在第二列里。
