直接用 class 切换预定义的 css grid 布局规则最稳定，因内联 style.gridtemplatecolumns 会覆盖媒体查询和 auto-fill 逻辑、禁用 transition、丧失响应式能力；js 应通过 classlist.toggle() 触发已声明的 .layout-grid 等样式类，配合 gap 统一控制间距，并同步 aria、焦点与屏幕阅读器语义。
直接用 class 切换预定义的 CSS Grid 布局规则，是最稳定、可维护性最强的方式。硬编码 style.gridTemplateColumns 或混用 float/flex 会导致响应式失效、键盘焦点错乱、屏幕阅读器无法识别。
为什么不能直接改 style.gridTemplateColumns
手动设置 element.style.gridTemplateColumns = '1fr' 会覆盖 CSS 文件里写的媒体查询和 auto-fill 逻辑，小屏下依然强行显示多列；同时失去 transition 动画能力，且无法被 @media 动态接管。Grid 的优势在于“声明式列数”，不是“命令式赋值”。
- CSS 中已定义：
.layout-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } - JS 只需：
container.classList.toggle('layout-grid')，其余由浏览器自动计算 - 若用内联样式，
@media (max-width: 768px)里的grid-template-columns: 1fr就完全失效
按钮点击时如何避免状态不同步
常见错误是点一次触发两次切换，或按钮文字没更新，根源在于没读取当前 class 状态就盲目 toggle。
- 先判断：
const isGrid = container.classList.contains('layout-grid') - 再操作：
container.classList.toggle('layout-grid')和container.classList.toggle('layout-list') - 同步更新按钮文案：
btn.textContent = isGrid ? '切换为列表' : '切换为网格' - 别用
onclick="toggleLayout()"写在 HTML 里——调试困难，多个按钮时逻辑纠缠
子项间距用 gap 而不是 margin
列表模式下若子项用了 margin-bottom，切换回网格时容易因 margin 折叠或叠加导致空白异常；Grid 的 gap 是容器级控制，安全、稳定、语义清晰。
- CSS 中统一写：
.layout-container { gap: 1rem; } - 子项内部去掉所有
margin相关定位，只靠gap控制间隔 - 这样无论
layout-grid还是layout-list，间距行为完全一致
真正麻烦的不是切换动作本身，而是确保 aria-selected、hidden、键盘焦点、屏幕阅读器语义全部同步——这些不显眼的细节，才是用户实际能否用上的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
