目前最稳的纯CSS响应式瀑布流方案只有两条：用column-width+column-gap多列布局，或grid-template-columns:repeat(auto-fill,minmax(250px,1fr))搭配grid-auto-flow:column加JS分配逻辑。
纯 CSS 实现响应式瀑布流、又不写死列数，目前最稳的路径只有两条：用 column-width + column-gap 做多列布局，或用 grid-template-columns: repeat(auto-fill, minmax(...)) 搭配 grid-auto-flow: column 配合 JS 分配逻辑。别信“三行代码搞定 Masonry”的宣传——grid-template-rows: masonry 在 Safari 和 Firefox 中根本无法检测，Chrome 里也极易因漏掉任一条件而静默退化为单列。
为什么 column-width 是响应式多列布局的唯一安全入口
浏览器只在启用多列上下文后才解析 column-gap；单独设它等于没写。而 column-count 会锁死列数（比如小屏下仍强行分 4 列，导致内容溢出），column-width 才是让浏览器按最小宽度自动算列数的正确开关。
-
column-width: 240px表示“每列至少 240px 宽”，容器宽 720px 就出 3 列，宽 960px 就出 4 列，无需媒体查询 - 必须加
break-inside: avoid到子项上，否则长图/段落可能被劈成两半跨列显示 -
column-gap: 16px此时才生效；若同时写了gap或margin，会和column-gap叠加造成间距失控 - 移动端要注意：iOS Safari 对
column-width的最小值容忍度低，设低于 200px 可能直接回退为单列
auto-fill 和 auto-fit 在瀑布流场景下不能混用
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 是当前兼容性最好、视觉最稳的 Grid 起点，但必须用 auto-fill，不是 auto-fit。
-
auto-fill会保留空轨道占位，确保所有子项严格对齐同一套列线——哪怕最后一行只有一张图，它也独占一列，避免横向偏移 -
auto-fit会把空轨道收缩掉，把空间让给有内容的列，结果就是小图被拉宽、大图被压扁、右边缘参差不齐 -
minmax(250px, 1fr)中的1fr是弹性上限，不是“填满整行”；写成100%会导致浏览器降级为minmax(250px, 0)，列直接消失 - 最小值选 250px 是经验阈值：iPhone 竖屏（375px）可塞 1–2 列，横屏（768px）稳出 3 列，文字与图都清晰
图片自身不处理，Grid 再准也没用
Grid 只排位置，不管内容怎么缩。常见问题全是图片没约束导致的：列宽变了，图还卡着原始尺寸，结果溢出、留白、压扁全来一遍。
立即学习“前端免费学习笔记（深入）”；
- 图片必须加
width: 100%; height: 100%; object-fit: cover;——max-width: 100%只控宽，高度自由伸缩，失真就是它干的 - 图片父容器（如
<figure>）必须设aspect-ratio，比如aspect-ratio: 4/3，否则object-fit没锚点，裁剪位置飘忽 - 如果图片带固定比例（如 16:9），最小列宽建议 ≥ 图片可接受的最小渲染宽度（例如 320px），否则
object-fit: cover会硬裁关键区域 - 禁止在图片上设
float、position: absolute或contain: layout，这些会让 Chrome 的masonry模式直接失效
真瀑布流（按高度排序）必须靠 JS，但 Grid 可大幅简化逻辑
纯 CSS 的 column-width 或 auto-fill Grid 都只是“视觉错落”，不是真正按高度排序的 Masonry。要实现后者，JS 仍是唯一可靠方案，但 Grid 已经帮你省掉列宽计算和断点适配。
- 用
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))控制列数，用grid-auto-flow: column让新元素按列顺序排列（而非默认的行顺序） - JS 只需维护一个列高数组，每次取最短列的索引，然后给该列最后一个元素加
grid-row-start，再 append 新元素 - 图片加载延迟、字体重排、动态内容插入都不会破坏列结构——因为 Grid 负责列宽与断点，JS 只管“塞进哪一列”
- 别用
grid-row: span N手动跨行模拟瀑布流，N 值难预估，且一旦内容变高就会错位
最容易被忽略的是：grid-template-rows: masonry 不是渐进增强，而是全有或全无。漏掉 height、漏掉显式 grid-template-columns、漏掉 break-inside: avoid，它就彻底不工作，而且不报错、不警告——你只会看到一行排不完就换行的普通网格。
