不能直接用grid-template-columns: 1fr 1fr，因其生成固定两列“表格式”布局，第三张卡强制进入右列顶部；瀑布流要求卡片按列高优先填充最短列底部，须改用auto-fill + minmax()预留列槽位，并设grid-auto-rows: minmax(100px, auto)防塌陷裁剪，图片需加display: block消除基线空白。
为什么不能直接用 grid-template-columns: 1fr 1fr
这只会生成固定两行一列的“表格式”布局，每行严格塞两个卡片，完全不是瀑布流。瀑布流要求：左列填满后，第三张卡自动落到左列底部，而不是跳到右列顶部。Grid 要模拟这个行为，必须放弃显式列定义，改用列优先的自动流向——但注意：grid-auto-flow: column 在 iOS Safari（尤其是 iOS 15.4 之前）基本不可用，且和 gap 协同时容易错位或漏间隙。
auto-fill + minmax() 是移动端双列瀑布流的底线配置
必须写成：grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))，并在小屏下强制生效：
-
auto-fill保证哪怕只有一张卡，也预留出两列“槽位”，防止刚加载时塌成单列 -
160px是针对移动端的合理最小宽度：低于 120px 图标/文字会挤成一团；高于 200px 在 iPhone 竖屏下可能撑不满宽度 - 别在媒体查询里临时换
auto-fit——列结构一旦重算，已渲染卡片位置会跳变
grid-auto-rows: minmax(100px, auto) 必须设，且不能妥协
这是防止卡片塌陷或裁剪的核心：
- 写成
100px固定值 → 图片被截、文字换行错乱、底部大片留白 - 写成单独
auto→ Chrome 90 之前版本会忽略，整行高度塌为 0 -
minmax(100px, auto)是唯一兼容解：给极矮卡片（如纯图标+一行字）兜底，又允许图文卡片自然撑开 - 别碰
fit-content()——CSS 规范明确不支持它在 Grid 行方向起效
图片底部那 4px 空白，跟 Grid 没半点关系
是 <img> 默认 vertical-align: baseline 导致的基线对齐问题，修补方式只有两个硬要求：
- 给图片加
display: block或vertical-align: top - 顺手补上
width: 100%; height: auto;，避免比例失真或溢出格子 - 别用
margin-bottom: -4px——换种字体或字号，这个像素就失效 - 也别用
line-height: 0——它会影响同一容器内的其他文本，副作用难控
auto-fill 和 minmax() 组合解释成“列槽存在性声明”。一旦你把它当成“智能填充”，就会在空数据、首屏加载、滚动中频发列数跳变。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
