最可靠方案是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
立即学习“前端免费学习笔记（深入）”；
- 结构必须是
<figure><img alt="HTML多张图片怎么自适应排列？网格排版实用技巧" ><figcaption>xxx</figcaption></figure>，不能是<img alt="HTML多张图片怎么自适应排列？网格排版实用技巧" ><figcaption>xxx</figcaption><img alt="HTML多张图片怎么自适应排列？网格排版实用技巧" >... - 对
<figure></figure>设display: inline-block或display: flex，再统一控制父容器的gap或text-align - 如果用
inline-block，父容器记得加font-size: 0消除 HTML 换行符产生的间隙，子元素里再调回字体大小
兼容 IE11 怎么办？
Grid 在 IE11 完全不支持，降级方案不是“微调 CSS”，而是换整套逻辑：
- 改用
display: flex+flex-wrap: wrap，但每个图必须包一层<div>，并设 <code>flex: 0 0 calc(33.333% - 8px)（减去 gap 的一半） - 绝对不要只给
<img alt="HTML多张图片怎么自适应排列？网格排版实用技巧" >加flex属性——它不接受宽高约束，容易撑破容器 - IE 下
gap无效，得用margin模拟，但要小心 margin 折叠问题，建议统一用 padding 包裹
真正卡住人的从来不是“怎么画格子”，而是图片原始尺寸不可控、figcaption 的块级天性、以及浏览器对 auto-fit 的实现差异——这些点漏一个，布局就偏移或错行。
