核心是用repeat(auto-fit, minmax(120px, 1fr))实现自适应列数，设gap统一间距，筛选项内用flex对齐文字与角标，小屏通过transform+fixed滑入滑出，联动过滤可用:has()+data属性纯css实现。
在 H5 商城页面中，用 CSS Grid 实现分类筛选的多列筛选项，核心是让筛选按钮（如品牌、价格区间、规格等）在不同屏幕下自动排列成合理列数，同时保持间距一致、换行自然、点击区域清晰。它不是为了“堆满屏幕”，而是解决“数量不确定 + 小屏要收拢 + 大屏要利用空间”这个实际问题。
筛选项容器用 Grid 控制列数与响应断点
筛选栏本质是一组水平流动的按钮或标签，Grid 在这里的作用是**按需分列、不写死宽度、避免溢出**。关键写法：
- 用
repeat(auto-fit, minmax(120px, 1fr))：最小项宽 120px（保证文字可读），小屏自动缩为 1 列，中屏 2–3 列，大屏铺满； - 禁用固定列数写法如
1fr 1fr 1fr，否则小屏会强制三列导致文字挤压或横向滚动； - 必须设
gap: 0.5rem（推荐 8px 左右），比 margin 更稳定，且自动避开边缘； - 给每个筛选项加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，防长文本撑破列宽。
筛选项自身用 Flex 对齐内容与状态标识
单个筛选项（比如一个“红色”标签）内部常含文字 + 右侧勾选图标/数字角标。这时不要在 Grid Item 上硬调对齐，而应在项内启用 Flex：
display: flex; align-items: center; justify-content: space-between;- 文字用
flex: 1; text-align: left;占满可用空间； - 角标或图标用独立
span，设margin-left: 0.25rem;或固定宽高，避免文字换行错位； - 激活态加背景色时，确保
padding均匀，别只加左右不加上下，否则视觉高度不一致。
小屏折叠与展开需脱离 Grid 轨道限制
移动端常把筛选栏收进“筛选”按钮后弹出的浮层。此时不能靠 display: none 切换——Grid 容器仍保留轨道，主内容被挤偏。正确做法：
- 默认状态：筛选容器设
position: fixed; top: 0; left: -100%; width: 80vw; transform: translateX(-100%);； - 点击“筛选”后加类
.filters--open，仅改transform: translateX(0)； - 配
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform;，iOS 滑动更顺； - 浮层内筛选项仍用相同 Grid 规则，但容器宽度已限定，无需额外媒体查询。
配合 JS 实现筛选联动（轻量级纯 CSS 方案）
如果希望点击筛选项后商品列表实时过滤，又不想每次触发 JS 重绘，可用 CSS 的 :has() + 自定义属性：
- 给筛选按钮加
data-filter="color-red"，激活时加aria-pressed="true"； - 给商品卡片加对应属性，如
data-color="red"； - 用
.products:has(.filter-btn[aria-pressed="true"][data-filter="color-red"]) .product-card:not([data-color="red"]) { display: none; }控制显隐； - 注意：此方案需现代浏览器支持（Chrome 105+ / Safari 15.4+ / Firefox 111+），H5 微信内置浏览器基本兼容。
