最可靠方案是display: grid配合grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))；auto-fit使列数自适应，minmax限定每列最小宽250px、最大均分空间；需配gap与高度约束防塌陷，图片用object-fit: cover裁剪保构图，figcaption须嵌套在figure内，IE11需降级为flex布局并手动计算宽度。

直接用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是目前最可靠、最少坑的方案，别碰 float 或纯 inline-block。

为什么 auto-fit + minmax 是核心？

这不是炫技写法，而是浏览器自动算列数的机制：minmax(250px, 1fr) 表示“每列至少 250px，最多均分剩余空间”，auto-fit 则让浏览器在宽度不够时合并列（比如从三列退到两列），而不是强行换行或溢出。

• 设成 auto-fill 会保留空轨道，导致右侧留白；auto-fit 才真正“自适应”
• 250px 不是 magic number，它得略大于你最小允许的图片宽度（比如缩略图宽 200px，就设 220px）
• 低于这个阈值时，列数归零——所以必须配 gap 和图片高度约束，否则塌陷

图片本身怎么不拉伸、不变形？

只写 width: 100% 不够，原始尺寸千差万别，必须加高度控制和裁剪逻辑：

• 统一设 height: 200px（或用 aspect-ratio: 4/3，但注意 Firefox 110+、Chrome 103+ 才支持）
• object-fit: cover 优先保构图，裁两边；object-fit: contain 保全图，但可能留白
• 千万别写 height: 100% 且不设父容器高——Grid 单元格默认高度由内容撑开，结果就是高矮不一

带图说（figcaption）时最容易错在哪？

figcaption 是块级元素，平铺写就会每组占满一行。必须把每张图+文字包进一个语义容器里：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 结构必须是

  xxx

  ，不能是
  xxx
  ...
• 对
  设 display: inline-block 或 display: flex，再统一控制父容器的 gap 或 text-align
• 如果用 inline-block，父容器记得加 font-size: 0 消除 HTML 换行符产生的间隙，子元素里再调回字体大小

兼容 IE11 怎么办？

Grid 在 IE11 完全不支持，降级方案不是“微调 CSS”，而是换整套逻辑：

• 改用 display: flex + flex-wrap: wrap，但每个图必须包一层
  ，并设 flex: 0 0 calc(33.333% - 8px)（减去 gap 的一半）
• 绝对不要只给 加 flex 属性——它不接受宽高约束，容易撑破容器
• IE 下 gap 无效，得用 margin 模拟，但要小心 margin 折叠问题，建议统一用 padding 包裹

真正卡住人的从来不是“怎么画格子”，而是图片原始尺寸不可控、figcaption 的块级天性、以及浏览器对 auto-fit 的实现差异——这些点漏一个，布局就偏移或错行。