用CSS Grid+JS通过class切换实现布局互切，核心是预定义.layout-grid（auto-fill多列）和.layout-list（1fr单列）两套规则，JS仅切换类名，避免内联样式，确保响应式与动画兼容。
直接用 CSS Grid + JavaScript 控制 grid-template-columns 和类名切换，就能实现网格布局与列表布局的快速互切，不需要重写 HTML 结构或引入框架。
怎么用 class 切换 grid / list 布局模式
核心是预先定义两套 CSS 规则，靠一个开关类（比如 layout-grid 或 layout-list）控制容器的 display 和列数。避免内联 style 操作，便于维护和动画过渡。
- 给外层容器（如
<div id="content">）添加基础类layout-container - CSS 中写：
.layout-container { display: grid; gap: 1rem; }<br>.layout-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }<br>.layout-list { grid-template-columns: 1fr; } - JS 切换时只改 class：
el.classList.toggle('layout-grid')、el.classList.toggle('layout-list') - 不推荐用
style.gridTemplateColumns = '1fr'—— 会覆盖 CSS 中的响应式规则，且无法复用媒体查询
为什么用 grid 而不是 float 或 flex
Grid 天然支持二维布局控制，切换时只需改列定义，行高、间距、对齐方式全部继承；而 flex 是一维的，列表模式下还凑合，但网格模式要模拟“等宽多列+自动折行”，得靠 flex-wrap + min-width + 容器宽度计算，容易在小屏错行或留白。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))在不同宽度下自动适配列数，无需 JS 监听 resize - 列表模式设为
1fr后，所有子项垂直堆叠，语义清晰，无障碍阅读顺序自然 - Flex 做网格时，若子项高度不一致，会出现“阶梯状”空隙，Grid 用
align-items: start可统一顶部对齐
点击按钮触发切换时的常见错误
最常踩的坑是事件绑定没清理、状态不同步，导致点一次变两次、按钮文字不更新、或者切换后子元素 margin 错乱。
立即学习“前端免费学习笔记（深入）”；
- 别用
onclick="toggleLayout()"写在 HTML 里 —— 难调试，且多个按钮时逻辑耦合 - 用
document.querySelector('[data-layout-toggle]').addEventListener('click', ...)统一管理 - 切换前先读当前状态：
const isGrid = container.classList.contains('layout-grid')，再决定加/删哪个类 - 按钮文案同步更新：
btn.textContent = isGrid ? '切换为列表' : '切换为网格' - 如果子项用了
margin-bottom，列表模式下可能叠加出双倍间距 —— 改用gap替代 margin 更安全
需要记住的兼容性细节
CSS Grid 在现代浏览器中已全覆盖（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），但 IE 完全不支持。如果必须兼容 IE，不要 fallback 到 JS 计算列数 —— 性能差、易出错；建议直接降级为纯列表模式，或用 @supports (display: grid) 包裹 grid 规则。
-
@supports (display: grid) { .layout-grid { ... } }可防止老浏览器解析失败样式污染 - 移动端 Safari 对
minmax()+auto-fill支持良好，但 iOS 14.5 之前不支持subgrid—— 这里用不到，不用管 - 如果布局内含图片，记得给
img加max-width: 100%，否则网格列缩小时图片会溢出
真正麻烦的不是切换动作本身，而是子元素内部的样式是否随布局模式自适应 —— 比如网格下卡片带阴影、列表下只留 border-bottom，这些得靠 .layout-grid > .item 和 .layout-list > .item 分开写，漏掉就看起来像没切换成功。
