用 display: grid 实现商品自动换行布局，核心是 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 动态生成列，配合 gap: 1rem 统一间距，避免 margin 合并；禁用 因其语义错误、响应式失效、无障碍缺失。
直接用 Grid 是目前最干净的多列商品布局方案，尤其适合固定最小宽度 + 自动增减列数的场景。关键不是写满 Flex 更适合「猜你喜欢」「新品上架」这类横向滚动栏，或移动端首屏只排一列的极简场景。它的优势是逻辑直白、兼容性好，但跨行控制弱。 真正难的不是外层排几列，而是卡片内文字、图片加载时按钮不上蹿下跳。这需要内部用 flex column + 占位约束，否则字体加载、图片异步渲染都会引发 CLS（累积布局偏移）。 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 表格标签的语义是「展示二维关系型数据」，比如参数对比表、库存台账。把商品塞进 最容易被忽略的点是：卡片内部结构是否稳定。无论外层用 Grid 还是 Flex，只要没用 display: grid 排，别碰 ——它语义错、响应式崩、无障碍失效，现代项目里纯属自找麻烦。
用
display: grid 实现自动换行的商品栅格grid-template-areas，而是靠 repeat(auto-fill, minmax()) 动态生成列。
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))：容器够宽就多列，窄了就自动缩成单列，无需媒体查询硬切gap: 1rem 统一控制行列间距，比给每个 .product 加 margin-bottom 更可靠（避开 margin 合并）.product img { height: 180px; object-fit: cover; }，防止拉伸或留白auto-fill 和 minmax()，如需兼容，得降级到 flex-wrap + flex-basis
用
display: flex 做横向滚动或单列流式布局
display: flex + overflow-x: auto + white-space: nowrap（否则内容会换行）flex: 0 0 240px（不缩放、不增长、固定宽），再加 margin-right: 12px
:last-child { margin-right: 0 } 或更稳妥的 gap（但 Safari 14.1 以下不支持 flex gap）scroll-behavior: smooth 提升滚动体验，用户拖拽更顺滑商品卡片内部结构怎么稳住不跳动
display: flex; flex-direction: column; height: 100%
.product-content）加 flex-grow: 1，把底部按钮“顶”到底部margin-top: auto，而不是靠 padding-bottom 或空 width 和 height 属性（哪怕只是占位值），或用 aspect-ratio: 4 / 3 预留空间为什么绝对不能用
布局商品卡片
，等于告诉屏幕阅读器「这是一格数据，不是独立内容」，会跳过标题层级、忽略按钮角色、打乱导航顺序。
display: table-cell 在小屏下无法换行，只能横向滚动或内容溢出/ ），不能靠 CSS 控制列数
flex-direction: column + flex-grow + margin-top: auto 约束底部，文字长度一变，按钮就会上下跳动——这个细节， 完全无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
