常用HTML自适应多终端图片画廊网格代码-html教程-PHP中文网

最可靠方案是css grid配合auto-fit与minmax()，核心语法为grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，其中280px为最小列宽阈值，auto-fit确保收缩空列并均分空间，1fr实现弹性伸缩，需配合aspect-ratio、object-fit和clamp()等样式防溢出变形。

常用html自适应多终端图片画廊网格代码

直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数场景，但写错一个参数或漏掉一行关键样式，小屏就溢出、图片就变形、间距就错乱——问题不在逻辑复杂，而在几个必须卡死的细节。

grid-template-columns 写 auto-fit 还是 auto-fill？

必须用 auto-fit，auto-fill 在小屏下会留空列，导致最后一行只有一张图却撑开两格宽度，视觉失衡。

auto-fit：无内容的列直接收缩，剩余列均分空间；手机上自动退为 1 列，不占位
auto-fill：强行填满所有可用宽度，哪怕后面没图，也会渲染空轨道
常见错误：把 minmax(280px, 1fr) 写成 minmax(280px, auto) ——auto 会让列宽失去弹性上限，Grid 失去自适应能力

图片不变形的关键三步

Grid 只管布局，图片怎么填满格子得靠自己控制。很多画廊一缩放就拉伸、模糊、上下留白，全是 img 自身样式没压住。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

给每个图片外层容器（比如 .gallery-item）设 aspect-ratio: 4/3（按你图的实际比例调整）
img 上写 width: 100%; height: 100%; object-fit: cover; ——别碰 height 像素值
绝对不要给 img 加 display: inline 或默认值，它带文字基线间隙，会导致网格行高不齐；统一设 display: block

gap 为什么在小屏上看起来太挤？

固定 gap: 12px 在 375px 宽屏上占比近 3%，视觉压迫强，还可能挤占图片有效宽度。

推荐用 gap: clamp(0.5rem, 2vw, 1rem)，让间距随视口自然缩放
旧版 Safari 不支持 clamp()？降级为 gap: 0.75rem 即可
别为了“视觉对称”把容器 padding 和 gap 混着调 —— 容器有 padding: 16px，就保持 gap: 12px，否则图片离边框过近

IE 或旧 Safari 怎么降级？

Grid 不是万能的，真要兼容 IE11 或 Safari 14 以下，得准备回退方案，但别全盘重写。

用 @supports not (display: grid) 包裹 flex 回退代码，避免现代浏览器执行冗余逻辑
flex 版写法：display: flex; flex-wrap: wrap;，子项设 min-width: 280px; flex: 1 1 auto;
别用 float + margin —— 外边距合并、首尾间隙难控，维护成本远高于 flex

最常被忽略的是子项样式对 Grid 的干扰：只要给 .gallery-item 加了 width: 200px 或 flex: 0 0 200px，auto-fit 就失效，Grid 退化成普通块流。检查时优先看子项有没有偷偷“锁死”宽度。