纯 CSS 响应式瀑布流需满足三前提：图片有明确宽高比、启用 grid-auto-flow: dense、高度不依赖加载；核心用 display: grid + auto-fit，列数自适应公式为 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))。
纯 CSS 实现响应式瀑布流画廊，在现代浏览器中已可行，但必须满足三个前提：图片有明确宽高比、容器启用 grid-auto-flow: dense、且不能依赖图片加载后才撑开高度——否则必塌陷、必跳变。
用 display: grid + auto-fit 控制列数自适应
核心不是“填满”，而是让列数随容器宽度自动增减。写死 repeat(3, 1fr) 在手机上会横向滚动，必须用：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
其中 280px 是单列最小宽度，auto-fit 会让空列收缩（auto-fill 则保留占位），响应式场景下只认 auto-fit。
- 小屏（
width ）→ 自动退为 1 列 - 中屏（
560px ≤ width ）→ 2 列 - 大屏（≥ 840px）→ 3 列或更多，取决于内容密度
防塌陷必须用 aspect-ratio 或 padding-top 占位
图片未加载时高度为 0，grid 按 0 渲染，加载后突然撑开，下方所有格子重排——瀑布流里这叫“列跳变”，用户肉眼可见抖动。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
解决方法是提前锁定容器高度：
- 现代浏览器（Chrome 88+ / Firefox 89+ / Safari 15.4+）：直接给
<img>设aspect-ratio: 4/3，再配width: 100%; height: auto; - 兼容旧版：外包一层容器，设
padding-top: 75%（对应 4:3），内部<img>绝对定位铺满 - 禁用任何
height: auto覆盖行为，尤其别在全局样式里写img { height: auto !important }
grid-auto-flow: dense 不加就不是瀑布流
没有 grid-auto-flow: dense，高图会把下方整行“顶开”，留下大片空白，后续短图不会回填——视觉上就是断层，不是错落。
同时要设 grid-auto-rows: 10px（值本身无意义，仅作行高基准），否则不同高度图片无法跨行。
- 漏掉
dense→ 瀑布流失效，变成“阶梯式”布局 - 没设
grid-auto-rows→ 高图只占 1 行，被截断或挤压 - 容器加了
overflow: hidden→ 跨行元素可能被裁切，尤其 Safari 下更敏感
Firefox 和 Safari 的 gap 渲染差异要手动补偿
grid-gap 在 Firefox 旧版本和 Safari 中存在间隙错位或丢失问题，尤其配合 grid-auto-flow: dense 时。稳妥做法是：
- 统一用
gap: 1rem替代grid-gap - 每个图片项加
margin-bottom: 1rem - 用
:last-child { margin-bottom: 0 }去掉最后一行冗余底边距 - 避免在
<img>上设vertical-align或其他影响基线的样式，否则 grid 行高判断失准
真正难的不是写几行 CSS，而是所有图片都得有可预测的宽高比；一旦出现一张比例异常的图（比如 16:9 混进一堆 4:3），整个列高节奏就会被打乱——这点常被忽略，却直接影响首屏稳定性。
