直接用css grid+javascript切换类名即可实现网格与列表布局互切，无需重写html或引入框架；核心是预定义.layout-grid（grid+auto-fit）和.layout-list（flex column）两套css规则，js仅切换类名，并配合localstorage持久化用户偏好及按钮状态同步。
直接用 CSS Grid + JavaScript 切换类名就能实现，不需要重写 HTML、不依赖框架，现代浏览器全支持。关键不是改 style.display，而是靠预定义的两套布局类控制容器行为。
怎么用 class 控制 grid / list 布局切换
核心是定义两个 CSS 类：.layout-grid 和 .layout-list，分别对应网格和列表样式。JS 只负责在容器上添加或移除这两个类，避免操作内联样式，方便加过渡动画、也利于响应式适配。
-
.layout-grid应设display: grid，用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现自适应列数，别写死repeat(3, 1fr)，否则小屏溢出、大屏留白 -
.layout-list推荐用display: flex; flex-direction: column; gap: 24px，比纯block+margin-bottom更稳——不会因 margin 合并导致首尾间距异常 - 每个商品/文件项需显式设
width: 100%，否则 flex 下可能收缩变形
如何让上传后的文件实时出现在切换布局中
文件上传成功后，服务端返回文件元数据（如 id、name、size、url），前端用 JS 动态生成 DOM 节点并插入到布局容器里。节点结构必须统一，确保在 .layout-grid 和 .layout-list 下都能正确渲染。
- 不要为不同布局写两套 HTML 模板，所有文件项共用一个
<div class="file-item"> 结构 <li>用 <code>document.createElement('div')+element.innerHTML或template.cloneNode(true)插入新项，避免 innerHTML 拼接 XSS 风险 - 插入后调用
container.classList.contains('layout-grid')判断当前模式，必要时触发重排（通常不需要，CSS 自动生效） - 切换时执行：
localStorage.setItem('layoutMode', 'grid')或'list' - 初始化时读取：
const mode = localStorage.getItem('layoutMode') || 'grid'，然后container.classList.add('layout-' + mode) - 按钮状态要同步：比如
document.querySelector('[data-mode="grid"]').classList.toggle('active', mode === 'grid') - 注意：Safari 在无痕模式下会拒绝写入
localStorage，需加 try/catch 包裹
为什么 localStorage + 按钮状态同步很重要
用户切到网格后刷新页面，又回到列表，体验断裂。必须把当前布局模式存进 localStorage，并在页面加载时还原类名和按钮高亮状态。
容易被忽略的是文件项内部的图片缩略图加载逻辑——网格模式下常需 object-fit: cover 和固定宽高比，列表模式却可能只显示图标+文字。这部分样式必须写在 .file-item 内部，不能依赖外层布局类，否则切换时会出现错位或拉伸。
