直接用 classList.toggle() 切换预定义 CSS 类是最优解；手动设置 style.gridTemplateColumns 会破坏媒体查询、auto-fill、transition、gap 控制及可访问性，导致响应式失效和 aria 状态不同步。
直接用 classList.toggle() 切换预定义的 CSS 类，是最快速、最可靠的方式；硬编码 style.gridTemplateColumns 或混用 float/flex 会立刻破坏响应式逻辑和可访问性。
为什么不能直接改 style.gridTemplateColumns
手动设置 element.style.gridTemplateColumns = '1fr' 会覆盖 CSS 文件中已写的媒体查询、auto-fill 行为和 transition 声明。小屏下依然强行渲染多列，动画失效，且浏览器无法再根据视口宽度自动重算列数。
-
@media (max-width: 768px)中定义的grid-template-columns: 1fr完全被忽略 - 失去
gap的统一控制能力，容易和子项margin冲突 - 屏幕阅读器无法感知布局变化，
aria状态不同步
怎么用 class 切换 grid / list 布局
CSS 预定义两套规则，JS 只负责切换类名。容器上始终保留基础类（如 layout-container），靠 layout-grid 和 layout-list 控制具体结构。
- CSS 中写：
.layout-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } - 对应写：
.layout-list { grid-template-columns: 1fr; } - JS 执行：
container.classList.toggle('layout-grid')和container.classList.toggle('layout-list') - 子项间距统一用
gap，子项内部去掉所有margin-top/margin-bottom
按钮点击时如何避免状态不同步
常见错误是点一次触发两次切换，或按钮文字没更新——根源在于没读取当前 class 状态就盲目 toggle。
立即学习“前端免费学习笔记（深入）”；
- 先判断：
const isGrid = container.classList.contains('layout-grid') - 再操作：
container.classList.toggle('layout-grid')和container.classList.toggle('layout-list') - 同步更新文案：
btn.textContent = isGrid ? '切换为列表' : '切换为网格' - 别在 HTML 里写
onclick="toggleLayout()"，调试困难，多个按钮时逻辑纠缠
真正麻烦的不是切换动作本身，而是确保 aria-selected、键盘焦点、屏幕阅读器语义全部同步——这些不显眼的细节，才是用户实际能否用上的关键。
