如何使用HTML和CSS实现网格拼图样式画廊布局-html教程-PHP中文网

纯 css 实现 masonry 最稳方案是 column-count + break-inside，而非 css grid；grid 尚未原生支持 true masonry，仅 chrome 125+ 有实验性单列支持；js 方案需规避图片未加载、dom 未更新、容器尺寸监听不准三坑。

如何使用html和css实现网格拼图样式画廊布局

拼图布局（Masonry）不能直接用 CSS Grid 实现

纯 CSS Grid 无法原生实现真正的拼图（Masonry）效果——即元素按高度自动“填坑”、错落排列。你看到的 grid-template-columns: repeat(auto-fit, minmax(...)) 只是等高网格，不是 Masonry。浏览器至今没给 Grid 加上 grid-auto-flow: masonry 的完整支持（Chrome 125+ 仅对单列 grid-auto-flow: row dense + grid-row: span N 有实验性支持，且不兼容 Safari/Firefox）。强行用 Grid 模拟 Masonry 容易导致图片截断、重叠或响应失效。

用 CSS `column-count` + `break-inside` 是最稳的纯 CSS 方案

这是目前兼容性最好、无需 JS、能真正实现“高度自适应填坑”的方案，原理是把容器当多栏报纸排版，每张图作为“段落”自然流进各栏底部空隙。

column-count 控制列数（如 column-count: 3），配合 column-gap 设间距
每张图必须包裹在块级容器中（如 <figure></figure> 或 <div class="item">），并设 <code>break-inside: avoid 防止被断开
图片本身用 width: 100% + height: auto 或 aspect-ratio 保比例，别设固定高
注意：Safari 对 column-count 中的 aspect-ratio 支持略滞后，可 fallback 用 padding-top 占位

示例关键 CSS：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

.masonry-gallery {
  column-count: 3;
  column-gap: 12px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 12px;
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

用 JavaScript 库（如 Masonry.js）时必须绕开的三个坑

如果你项目允许引入 JS，masonry-layout 或 vanilla-masonry 确实更可控，但容易栽在：

图片加载完成前就初始化：导致高度计算为 0，布局崩乱 → 必须监听 img.onload 或用 imagesLoaded 插件
动态增删图片后没重新 layout：调用 layout() 方法前，确保 DOM 已插入且样式已计算（可用 getComputedStyle 触发重排）
容器宽度变化未响应：别只靠窗口 resize，要监听容器尺寸变化（ResizeObserver 更准，比 window.addEventListener('resize') 可靠）