HTML中用代码实现图片九宫格排版布局-html教程-PHP中文网

css grid 是实现九宫格图片布局最直接、可控的方式，通过 display: grid、grid-template-columns: repeat(3, 1fr) 和 gap 即可完成；图片用 object-fit: cover 防变形，缺图时需显式占位，响应式通过媒体查询调整列数，ie11 需降级 flexbox。

html中用代码实现图片九宫格排版布局

用 CSS Grid 实现九宫格图片布局最直接

不用 JavaScript，纯 HTML + CSS 就能稳稳撑起 3×3 图片网格，display: grid 是目前最干净、可控性最强的方式。Flexbox 虽然也能凑出九宫格，但对齐和等距控制容易出偏差，尤其当图片尺寸不一致时。

关键点在于容器设置 grid-template-columns 和 gap，子项不需要额外样式（除非你想统一宽高比）：

<div class="grid-3x3">
  @@##@@
  @@##@@
  <!-- 共 9 张 -->
</div>

.grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; /* 行列间距 */
}

repeat(3, 1fr) 比写 1fr 1fr 1fr 更安全，避免因空格或换行导致解析失败
如果图片原始宽高比差异大，加 img { width: 100%; height: 100%; object-fit: cover; } 防止拉伸变形
别给 img 设固定 width/height，否则在响应式下会破坏网格流

图片数量不足 9 张时如何保持结构完整

实际业务中常遇到只有 5 或 7 张图的情况，Grid 默认不会自动补空位，视觉上会塌陷成“缺角”——这不是 bug，是预期行为。要维持 3×3 框架，必须显式占位。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

服务端或 JS 渲染时，补足 <div class="placeholder"></div> 即可，CSS 中给 placeholder 设 visibility: hidden 或 background: transparent
纯 CSS 方案有限：可用 ::after 伪元素 + content: ""，但只适用于固定数量缺口，且无法响应动态变化
千万别用 grid-auto-flow: dense 试图“填空”，它会打乱 DOM 顺序，语义和可访问性受损

响应式断点下退化为单列或双列

移动端窄屏硬撑 3 列会导致图片过小、文字被挤，必须做断点处理。核心是改 grid-template-columns，而不是删节点或 JS 重排。

@media (max-width: 768px) {
  .grid-3x3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid-3x3 {
    grid-template-columns: 1fr;
  }
}

用 minmax() 可以更灵活：repeat(auto-fit, minmax(200px, 1fr)))，但要注意 Safari 旧版本兼容性
避免在媒体查询里重复写 gap，它本身是响应式的，只需设一次
如果用了 object-fit: cover，记得在小屏下检查裁剪区域是否切掉关键内容

IE11 兼容需求下只能降级用 Flexbox

IE11 不支持 grid-template-columns 的 repeat() 和大部分函数语法，必须手动写三列，且无法真正等分布局。

.grid-3x3-ie {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grid-3x3-ie > * {
  -ms-flex: 0 0 calc(33.333% - 12px); /* 手动减去 gap */
  flex: 0 0 calc(33.333% - 12px);
  margin: 6px;
}