用 display: grid 实现商品自动换行布局，核心是 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 动态生成列，配合 gap: 1rem 统一间距，避免 margin 合并；禁用 因其语义错误、响应式失效、无障碍缺失。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接用 display: grid 排，别碰 <table>——它语义错、响应式崩、无障碍失效，现代项目里纯属自找麻烦。
<h3>用 <code>display: grid 实现自动换行的商品栅格
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; }，防止拉伸或留白 - IE11 不支持
auto-fill和minmax()，如需兼容，得降级到flex-wrap+flex-basis
用 display: flex 做横向滚动或单列流式布局
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提升滚动体验，用户拖拽更顺滑
商品卡片内部结构怎么稳住不跳动
真正难的不是外层排几列，而是卡片内文字、图片加载时按钮不上蹿下跳。这需要内部用 flex column + 占位约束，否则字体加载、图片异步渲染都会引发 CLS（累积布局偏移）。
立即学习“前端免费学习笔记（深入）”；
- 卡片容器加
display: flex; flex-direction: column; height: 100% - 内容区（如
.product-content）加flex-grow: 1，把底部按钮“顶”到底部 - 按钮加
margin-top: auto，而不是靠padding-bottom或空<br> - 图片必须带
width和height属性（哪怕只是占位值），或用aspect-ratio: 4 / 3预留空间
为什么绝对不能用 <table> 布局商品卡片
<p>表格标签的语义是「展示二维关系型数据」，比如参数对比表、库存台账。把商品塞进 <code><td>，等于告诉屏幕阅读器「这是一格数据，不是独立内容」，会跳过标题层级、忽略按钮角色、打乱导航顺序。
<ul>
<li>响应式断裂：<code>display: table-cell 在小屏下无法换行，只能横向滚动或内容溢出
<tr>/<td>），不能靠 CSS 控制列数
<p>最容易被忽略的点是：卡片内部结构是否稳定。无论外层用 Grid 还是 Flex，只要没用 <code>flex-direction: column + flex-grow + margin-top: auto 约束底部，文字长度一变，按钮就会上下跳动——这个细节，<table> 完全无解。</table>
