必须用 auto-fill 而非 auto-fit，因 auto-fill 预占列轨道确保瀑布流对齐；最小列宽设 240px 平衡小屏适配；gap 需配合 display: block 和禁用 margin 防干扰；grid-auto-rows 须用 minmax(100px, auto) 防塌陷；移动端需媒体查询降级至 160px。
纯 CSS 实现视觉上接近瀑布流的响应式布局，grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 是当前最稳的起点，但“间距统一”不是加个 gap 就完事——它容易被图片基线、行高塌陷、DOM顺序错乱和小屏列宽失控悄悄破坏。
为什么 auto-fill 不是可选项，而是必须项
瀑布流对齐依赖列轨道的“预占位”。auto-fill 保证容器宽度能容纳 N 列时，就生成 N 条列轨道，哪怕某列暂时为空；auto-fit 会把空轨道收缩掉，导致后续高度不一的卡片插入时横向偏移、列宽跳变。
常见现象：auto-fit 下刚加载 3 张图时只显示 1 列，滚动后突然变成 3 列，卡片左右晃动；或者小图被拉宽、大图被压扁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终用
repeat(auto-fill, minmax(240px, 1fr))，别写auto-fit - 最小宽度选 240px 是平衡点：iPhone 竖屏（375px）可塞 1–2 列，文字与图仍清晰；设 320px 易在小屏只剩 1 列
- 禁用
minmax(240px, 100%)——%在grid-template-columns中非法，浏览器会退化成minmax(240px, 0)，列直接消失
gap 生效但视觉“不对齐”？先查这三处
gap 本身没错，但常被其他样式吃掉或干扰。它只控制网格项之间的间隙，不处理项内内容、父容器 padding 或子元素自身 margin。
典型错误现象：列间有空隙，但最后一行右端参差不齐；或卡片底部多出 4px 空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block或vertical-align: top——<img>默认是 inline 元素，基线对齐会引入不可控空白 - 禁用所有子项的
margin，尤其别写:not(:last-child) { margin-bottom: 16px }，它和gap叠加会让间距翻倍 - 父容器别设
padding后又指望gap对齐边缘——padding是内容区缩进，gap是项间距离，二者逻辑不同
grid-auto-rows 不能写 auto，也别写固定值
写 grid-auto-rows: auto 在旧版 Chromium（如 Chrome 90 前）可能被忽略，导致行高塌陷；写死 200px 又会让短卡片留白、长卡片被裁剪。
正确解法是用 minmax(100px, auto)：给最小高度兜底防塌，又允许内容撑开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须用
minmax(100px, auto)，不要单独用auto或fit-content()（后者在 Grid 行高中不生效） - 100px 是经验值：足够撑开标题+简短描述，又不会让极矮卡片（如图标卡）过度留白
- 如果卡片含表单或长文本，可提高下限至
140px，避免换行错乱
移动端列宽崩了？minmax 必须配媒体查询降级
minmax(240px, 1fr) 在 iPhone 竖屏（375px）下仍会尝试塞 2 列，结果每列只剩 ~170px，图片被严重压缩、文字挤成一团。
这不是 Grid 的问题，是你没告诉它“小屏下最小宽度该变小”。gap 不响应屏幕尺寸，minmax 的最小值也不自动缩放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加媒体查询：
@media (max-width: 768px) { .waterfall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } - 160px 是安全阈值：375px 宽度下最多 2 列，留出 gap 和呼吸感；再小（如 120px）会导致图片糊、字看不清
- 别用
clamp()做响应式最小值——Safari 13.1 前不支持，且vw在窄屏下易过小，不如明确断点可控
真正难的不是写出那几行 CSS，而是意识到：Grid 瀑布流本质是“用列轨道模拟高度排序”，它不改变 DOM 顺序，也不感知内容高度变化。所以图片比例必须靠 aspect-ratio 锚定，空白必须靠 minmax + auto-fill 预留，而可访问性风险（比如 grid-auto-flow: dense）往往上线前才被键盘 tab 测试暴露出来。
