Grid 布局无法原生实现按列填充的真瀑布流，但可通过 grid-template-columns + auto-fit、aspect-ratio/padding-top 控高、grid-auto-flow: dense 填空三者结合，实现语义清晰、响应式且兼容现代浏览器的视觉瀑布流效果。
Grid 布局本身不能原生实现“按列填充、自动落入最短列”的真瀑布流，但可以用 视觉模拟 + 高度可控卡片 来做出错落有致的效果，兼顾语义、响应式和现代浏览器支持。
用 grid-template-columns + auto-fit 搭配自适应列数
这是目前最推荐、最实用的纯 CSS 方案：
- 写法：.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); gap: 1rem; }
- auto-fit 让列数随容器宽度自动增减，小屏变 1 列，中屏 2 列，大屏 3–4 列
- minmax(280px, 1fr) 保证每列最小 280px，超出部分均分，避免过窄或拉伸变形
- gap 统一控制卡片间距，比 margin 更干净稳定
让卡片高度可预测，防止塌陷错位
瀑布流效果是否整齐，关键不在布局方式，而在每张卡片有没有稳定高度。图片加载前高度为 0 是最大坑点：
- 首选方案：给卡片容器加 aspect-ratio: 4/3（或对应你图的比例），现代浏览器全覆盖（Chrome 88+、Firefox 89+、Safari 15.4+）
- 兼容 fallback：用 padding-top 占位，比如 4:3 图就写 padding-top: 75%;，再配合 position: relative 和 img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
- 千万别只写 img { width: 100%; } 而不控高——加载瞬间高度归零，整列会突然上跳
用 grid-auto-flow: dense 填空，提升空间利用率
当卡片高度差异明显时，dense 可让较矮卡片自动填补前面列留下的空隙：
- 加上 grid-auto-flow: dense; 后，Grid 不再严格按 DOM 顺序逐格填满，而是优先找空位
- 注意：它不会改变 DOM 顺序，所以对 SEO 和键盘导航友好（这点比 column-count 强得多）
- 如果卡片含按钮或链接，建议同时设 grid-auto-rows: 1fr 或一个基础值（如 200px），避免某些浏览器渲染抖动
慎用 overflow: hidden 和绝对定位
这两个操作看似能“美化”，实则破坏瀑布流逻辑：
- 给容器加 overflow: hidden 会截断跨行卡片（比如一张高图占两行，但被裁掉下半部分）
- 卡片内部用 position: absolute 脱离文档流，会导致 Grid 失去高度参考，列高计算失效
- 所有卡片应保持为普通块级元素，高度由内容或 aspect-ratio/padding-top 主导
真正错落有致，靠的不是“算法塞入最短列”，而是“列宽自适应 + 卡片高度可控 + dense 填空”。不复杂但容易忽略。
