grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 是唯一稳定实现视觉瀑布流的纯 css grid 写法，但非真正瀑布流；它仅响应列数，不解决错位、溢出、宽高失真等问题，需配合 aspect-ratio、align-items: start、阶梯断点等才能可靠呈现。
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 是当前唯一能稳定产出“视觉瀑布流”效果的纯 CSS Grid 写法，但它不是真瀑布流，也不靠 grid-template-rows: masonry——那个只在 Chrome 116+ 有效，且有严苛限制。
为什么 auto-fill + minmax 是起点，不是终点
这个组合只解决列数响应式，不解决图片错位、文字溢出、列宽忽大忽小的问题。常见错误是写了 auto-fit 后发现最后一行图片右端参差不齐，或小图被拉宽、大图被压扁。
-
auto-fill强制保留空列占位，确保所有图片对齐同一套列线；auto-fit会收缩空轨道，破坏横向对齐 -
minmax(250px, 1fr)中的1fr不是“填满”，而是弹性上限：容器宽 900px 时生成 3 列，每列就是 300px；不是“最小 250px，最大 100%”——%在grid-template-columns里无效，会退化成minmax(250px, 0) - 最小值选
250px是经验阈值：iPhone 竖屏（375px）剩 1–2 列，文字和图仍清晰；设320px就容易只剩 1 列
aspect-ratio 必须加在图片父容器上，不是 <img> 自身
Grid 只排位置，不管内容怎么缩。没 aspect-ratio，object-fit: cover 就没锚点，裁剪位置飘忽，同一张图在不同列里显示区域完全不同。
- 给
<figure></figure>或包裹<img>的<div> 加 <code>aspect-ratio: 4/3或1/1，而不是直接加在<img>上 -
<img>本身必须加width: 100%; height: 100%; object-fit: cover;——max-width: 100%只控宽，高度自由伸缩，失真就是它干的 - 如果文章卡片含标题+摘要+图，建议统一用
aspect-ratio: 5/4，比 16:9 更适配文字密度 - 必须显式写
align-items: start，否则卡片会被撑高，视觉变成“等高栅格” -
gap: 1rem是安全起点，但需配合margin-bottom：子项自身加margin-bottom: 1rem，再设gap: 1rem，可避免最后一行底部漏掉间距 - 别用
row-gap单独设——某些 Safari 版本对row-gap解析异常，统一用gap - 推荐阶梯式媒体查询：
@media (max-width: 480px) { grid-template-columns: 1fr; }、@media (min-width: 481px) and (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }、@media (min-width: 769px) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } - 不用
minmax()套在小屏断点里——移动端列数少，固定1fr或2fr更稳 - resize 时浏览器可能多次触发 layout，要用
ResizeObserver替代window.resize，尤其当页面含懒加载图片时
gap 和 align-items 配合不好，瀑布流就变“台阶流”
默认 align-items: stretch 会让所有卡片拉高到该行最高项，失去错落感；而 gap 设太小，图片边缘粘连，留白不足。
移动端断点不能只靠 max-width，要防 resize 抖动
用 @media (max-width: 480px) 直接切 column-count: 1 是错的，因为 column-count 和 grid 是两套机制，混用会冲突。真正要切的是 grid 列数，且需防抖。
column-count 或引入 JS 库。
