复杂多栏筛选菜单需四层协同：语义结构定骨架、grid控二维布局、flex控子项排列、折叠用transform实现；禁用table和嵌套div以保障响应式、可访问性与dom稳定性。
复杂多栏筛选菜单不是靠堆 div + float 或硬写 width 撑出来的，核心是「语义结构定骨架、Grid 控二维、Flex 控子项、折叠逻辑靠 transform」——这四层缺一不可。
为什么不能用 table 或嵌套 div 做筛选菜单
表格布局会锁死列宽、无法响应式重排，且 rowspan/colspan 一加，JS 筛选时 DOM 遍历就容易错位；纯 div 套 div 则让屏幕阅读器读不出“这是筛选区”，键盘 Tab 顺序混乱，aria-expanded 也无处挂载。
- 筛选项必须包裹在
<fieldset></fieldset>或带role="region"的容器里，配aria-labelledby关联标题 - 每个筛选维度（如“价格区间”“品牌”“分类”）应为独立
<section></section>，内部用<legend></legend>或<h3></h3>标识 - 选项列表统一用
<ul role="listbox"></ul>，单项用<li role="option">，禁用div模拟选项
Grid 定义主栏结构，但别滥用 grid-template-areas
三栏常见组合是「左筛选栏 + 中内容区 + 右快捷筛选」，用 grid-template-columns: 280px 1fr 220px 比写一堆 grid-area 更稳——名字写错一个，整块就白搭。
- 筛选栏设
min-width: 240px，避免小屏下被压缩到文字挤成一团 - 中内容区用
grid-column: 2 / -1跨列，确保它始终占满剩余空间 - 右栏加
overflow-y: auto，防止长筛选项撑破布局；同时设max-height: calc(100vh - 120px)限制滚动范围 - 断点改列数时，直接用
@media (max-width: 768px) { .filter-grid { grid-template-columns: 1fr; } }，别试图用grid-template-areas动态切换
折叠抽屉用 transform: translateX()，不是 display 或 height
移动端常把左筛选栏收进抽屉，display: none 会中断 transition，height: 0 在内容动态增减时难预估高度，transform: translateX(-100%) 是唯一兼顾性能与可靠性的方案。
- 抽屉容器必须设
position: fixed或absolute，否则会推挤主内容流 - 过渡只写
transition: transform 0.3s ease, opacity 0.3s ease，禁用all - 遮罩层
.overlay和抽屉同级，z-index设为 999，但低于弹窗类组件（如 1000+） - 触发按钮需带
aria-controls="filter-drawer"，抽屉根元素加id="filter-drawer"和aria-hidden="true"，展开时同步切换
筛选项内部用 Flex，但注意 flex-shrink 和换行
单个筛选维度（如“品牌列表”）里一堆 checkbox，用 display: flex; flex-wrap: wrap; gap: 8px 最省心，但默认 flex-shrink: 1 会让窄屏下选项被压扁。
- 给每个选项加
flex: 0 0 calc(50% - 4px)实现两列自适应，比媒体查询更轻量 - 文字过长时，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，别靠width截断 - 全选/清空按钮放顶部，用
justify-content: space-between对齐，不加margin干扰 flex 计算 - 移动端点击热区不足 44px？给
label设min-height: 44px; display: flex; align-items: center;，别只调font-size
真正难的不是让筛选菜单“看起来像抽屉”，而是它在 JS 加载失败时仍能线性展开、在缩放 200% 时选项不重叠、在键盘导航下焦点不跳空、在屏幕阅读器里能说清“当前筛选了苹果和三星，共 12 项结果”——这些都藏在 fieldset 的嵌套深度、transform 的触发时机、以及 aria-expanded 与 DOM 状态是否严格同步里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
