最可靠纯css瀑布流方案是grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))；auto-fill保留空列确保对齐，1fr参与弹性分配而非独占整行，需配合width/height/object-fit/aspect-ratio/display:block防失真与跳动。
纯 CSS 实现“视觉上像瀑布流”的效果，grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 是当前最可靠、无需 JS 的起点。它不真按高度排序（那是 JS 瀑布流），但能靠内容高度差异 + 合理列控，做出错落有致、响应自然的效果。
为什么必须用 auto-fill 而不是 auto-fit
auto-fit 会把空的网格轨道收缩掉，把空间让给有内容的列；而瀑布流场景里，最后一行常有不满列的图片，auto-fill 会保留这些列的占位，确保所有图片严格对齐到同一套列线上——否则高度差异大的图会横向偏移、列宽忽大忽小，视觉就散了。
- 典型错误：写了
auto-fit却发现小图被拉宽、大图被压扁，或最后一行图片右端参差不齐 - 例外情况：如果你做的是「卡片列表」且每张卡高度接近，
auto-fit更省空间；但图片高度天然差异大，auto-fill更稳
minmax(250px, 1fr) 中的 1fr 不是“填满”
1fr 在这里不表示“这张图独占一整行”，而是参与列宽的弹性分配。当容器能放 4 列，4 个 1fr 就均分总宽；若只能放 3 列，就三等分——实际列宽由容器除以列数决定，1fr 只是上限约束，防止某列无限窄。
- 别写
minmax(250px, 100%)：%在grid-template-columns里无效，浏览器会退化成minmax(250px, 0)，列直接崩溃 - 最小值选
250px是经验阈值：手机横屏（~768px）可塞 3 列，小屏竖屏（375px）剩 1–2 列，文字和图都还清晰；设320px就容易在 iPhone 上只剩 1 列 - 如果图片带固定比例（如
16:9），最小宽度建议 ≥ 图片可接受的最小渲染宽度（比如320px），否则object-fit: cover会硬裁
图片自身不处理，Grid 布局再准也没用
Grid 只排位置，不管图片怎么缩。常见问题：列宽变了，图还卡着原始尺寸，结果溢出、留白、压扁全来一遍。
- 必须给图片加
width: 100%; height: 100%; object-fit: cover;——max-width: 100%只控宽，高度自由伸缩，失真就是它干的 - 必须给图片父容器（比如
<figure></figure>或直接<div>）设 <code>aspect-ratio: 4/3或aspect-ratio: 1/1，否则object-fit没锚点，裁剪位置飘忽 - 别漏掉
display: block，否则图片下方默认有空白间隙
真正麻烦的不是 Grid 写法，而是图片尺寸不可控——哪怕你设了 aspect-ratio，加载前高度为 0，会导致布局跳动；所以实际项目中，要么服务端返回宽高字段预设容器尺寸，要么用 img 的 loading="lazy" 配合 height 属性占位，否则用户滚动时会明显抖动。
