Grid布局怎么组织商品卡片网格
Grid负责整体结构，不是为了“好看”而用，是为了解决“多列自适应+固定行高/间距+响应断点”这个实际问题。用display: grid比浮动或inline-block更可控，尤其当商品数量不固定、需要等高卡片时。
关键不是写满所有grid-template-columns，而是用minmax() + auto-fit应对不同屏幕：
section.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
常见错误：硬写grid-template-columns: 1fr 1fr 1fr——小屏直接溢出；或漏掉gap导致卡片贴边，视觉拥挤。
-
minmax(280px, 1fr)确保单列最小宽度，又允许撑满剩余空间 - 不用
auto-fill，它会留空列；auto-fit才真正收缩空轨道 - 别在
grid-item上设width，Grid已接管尺寸，加了反而破坏流式逻辑
Flex怎么实现顶部筛选栏的横向对齐与换行
筛选栏本质是“一组可选按钮”，需要左对齐、间距一致、超出自动换行——Flex比Grid更适合这种一维流动场景。
立即学习“前端免费学习笔记（深入）”；
错误做法：给每个.filter-btn加float: left或inline-block，结果换行错位、基线不齐、hover状态难统一。
正确做法是用display: flex容器 + flex-wrap: wrap：
.filters {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
注意：gap在Flex中从Chrome 104+/Firefox 103+才稳定支持，旧版需用margin模拟（但要避开首尾外边距）。
- 用
flex: 0 0 auto控制按钮不伸缩，避免文字长时被压缩 - 激活态用
background-color+color切换，别依赖border——边框增大会影响布局重排 - 筛选项过多时，考虑加
max-width: 100%防容器溢出父级
如何用CSS变量联动筛选状态与商品显隐
纯CSS实现筛选，核心是让商品元素根据筛选条件“自己决定是否显示”，而不是靠JS反复增删class。这靠:has() + 自定义属性配合。
前提：每个商品有对应属性，比如data-category="shoes"，筛选按钮有data-filter="shoes"。然后用CSS变量暂存当前激活值：
body {
--active-filter: all;
}
.filter-btn[data-filter="shoes"]:is(:focus-within, :active, .active) {
--active-filter: shoes;
}
再用:has()匹配：
.product:not(:has(~ .filter-btn[style*="--active-filter: all;"])) {
display: none;
}
.product[data-category="shoes"]:has(~ .filter-btn[style*="--active-filter: shoes;"]) {
display: block;
}
⚠️现实限制：:has()目前仅Chrome 105+/Safari 15.4+/Firefox 121+支持，且不能用于伪类链（如:has(.btn.active)不生效）。生产环境建议降级为JS控制data-active属性，CSS只做显隐响应。
- 不要试图用
[data-category] != [data-filter]语法——CSS不支持不等于选择器 - 多个筛选条件（如分类+价格）需组合
data-属性，用JS合并判断更可靠 - 用
opacity: 0; pointer-events: none;替代display: none可保留布局，适合动画过渡
为什么不能只靠CSS完成完整筛选交互
CSS能响应状态变化并控制显隐，但无法“记住用户点了哪个按钮”或“同步更新URL参数”。一旦刷新页面，筛选就丢失——这不是CSS的职责范围。
真实项目里，data-active必须由JS维护，并同步写入localStorage或URLSearchParams。CSS只负责“看到data-active="shoes"就显示对应商品”这一层映射。
- 浏览器前进/后退时，
popstate事件必须触发JS更新按钮状态和CSS变量 - 无障碍方面，
aria-pressed必须由JS控制，CSS无法读取ARIA属性 - 服务端渲染（SSR）场景下，初始HTML需带正确
data-active，否则首屏闪动
最易被忽略的是：把筛选逻辑全押在CSS上，结果发现URL不可分享、SEO抓不到分类页、用户没法发链接给朋友——这些都得靠JS补全，CSS只是执行层。
