直接用 css grid + javascript 控制类名切换即可实现商品列表与网格布局自由切换，无需框架或第三方库；核心是用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应网格，列表模式用 display: flex; flex-direction: column; gap: 24px，通过 classlist.toggle() 切换 .layout-grid 与 .layout-list 类，并配合 localstorage 持久化用户偏好及按钮状态同步。
直接用 CSS Grid + JavaScript 控制类名切换，就能实现商品列表和网格布局自由切换，不需要框架、不依赖第三方库，现代浏览器全支持。
用 display: grid 实现响应式商品网格
Grid 是目前最干净的网格方案，比 float 或 inline-block 更可控。关键不是写死列数，而是用 grid-template-columns 配合 minmax() 和 auto-fit 自动适配容器宽度。
常见错误是写成固定 3 列（如 repeat(3, 1fr)），导致小屏溢出或大屏留白。正确做法：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 每项最小 280px，最多占满一列 - 搭配
gap: 16px控制间距，比margin更可靠（不会出现首行/末行额外空白） - 容器必须有明确宽度（比如
max-width: 1200px）且设为margin: 0 auto居中
列表模式用 display: flex 垂直堆叠
列表布局本质是单列流式结构，flex 比 block 更易统一控制对齐和间距。别用 display: block 然后靠 margin-bottom 拉距离——那样在切换时容易因 margin 合并出错。
实操要点：
-
flex-direction: column确保垂直排列 -
gap: 24px统一项目间距（注意：IE 不支持gap，如需兼容可降级用margin-bottom+:last-child { margin-bottom: 0 }） - 每个商品项设
width: 100%，避免 flex 默认收缩影响宽度
用 class 切换触发布局变化，不要操作 style
直接改元素 style.display 会污染内联样式，后续 CSS 覆盖困难，也难做过渡动画。应该通过添加/移除 class 来控制布局逻辑。
示例结构：
<div class="product-container layout-grid"> <div class="product-item">...</div> <div class="product-item">...</div> </div>
CSS 中定义：
.layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.layout-list { display: flex; flex-direction: column; gap: 24px; }
JS 切换只需一行：container.classList.toggle('layout-grid')，再同步 toggle 'layout-list' 即可。
切换按钮状态和持久化要手动处理
很多人以为加个 click 就完事，结果刷新页面回到默认布局，或者按钮图标没同步更新。这需要额外两步：
- 点击按钮时，除了切布局 class，还要给按钮加
aria-pressed="true"并切换 icon（比如从icon-grid改成icon-list） - 用
localStorage记录用户上次选择：localStorage.setItem('productLayout', 'list')，页面加载时读取并初始化对应 class - 注意：不要监听
window.matchMedia自动切布局——这是响应式的事，跟用户主动切换是两回事，混用会导致行为冲突
真正麻烦的是商品卡片内部结构是否适配两种布局：比如网格下图片宽高比用 aspect-ratio，列表下可能需要固定高度；这些细节不统一，切换时视觉跳动就很明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
