使用 repeat(auto-fill, minmax(250px, 1fr)) 实现列数自适应，配合 grid-auto-rows: 10px、grid-row-end: span x 和 grid-auto-flow: dense 模拟瀑布流，图片需设 aspect-ratio 和 object-fit 确保宽高比。
用 grid-template-columns: repeat(auto-fill, minmax(...)) 控制列数自适应
移动端屏幕宽度变化大，固定列数（如 repeat(3, 1fr)）在小屏上会挤成窄条，在大屏上又留白。必须让列数随容器宽度自动增减。auto-fill 是关键——它强制保留所有可能列的轨道，哪怕某列没内容，也确保所有卡片严格对齐同一套列线。写成 repeat(auto-fill, minmax(250px, 1fr)) 后，iPhone 竖屏（375px）会生成 1 列，iPad 横屏（1024px）可塞 4 列，且每列最小 250px，不会把图片压扁。
常见错误是误用 auto-fit：它会收缩空列，导致最后一行卡片右端参差不齐，尤其当高度差异大的图片混排时，视觉立刻散掉。
设 grid-auto-rows 为小值（如 8px 或 10px），再用 grid-row-end: span X 模拟高度错落
CSS Grid 本身不按内容高度“找最短列插入”，但可以靠细粒度行轨道 + 跨行来模拟瀑布流视觉效果。grid-auto-rows: 10px 表示每行高 10px，是个计算基准；每个卡片根据自身渲染高度决定跨多少行：grid-row-end: span 12 就是占 120px 高。
实际项目中建议用 JS 动态计算并加类名，比如：
.item-12 { grid-row-end: span 12; }
.item-24 { grid-row-end: span 24; }
注意：grid-auto-rows 值越小，跨度控制越精细，但太小（如 1px）会导致浏览器创建过多轨道、性能下降；太大（如 50px）则空白明显，失去错落感。
必须加 grid-auto-flow: dense，否则空隙无法填充
默认 grid-auto-flow: row 是顺序填满一行再换下一行，遇到一个高卡片跨多行，后面的小卡片就会被卡在它下方，留下顶部空洞。加上 grid-auto-flow: dense 后，浏览器会主动把后续小卡片往前塞进前面的空隙里，实现紧凑排列。
副作用是 DOM 顺序和视觉顺序可能不一致——比如第 5 个卡片可能显示在第 2 个位置。如果语义或可访问性要求严格（如屏幕阅读器需按 DOM 顺序读），就得配合 order 属性手动调序，或放弃 dense 改用 JS 完整 Masonry 计算。
图片卡片必须约束宽高比，否则 minmax() 失效
Grid 只管位置，不管内容怎么缩。如果图片没设 width: 100% 和 aspect-ratio，它会按原始尺寸撑开，直接破坏列宽计算逻辑，出现溢出、拉伸、裁剪错位。
正确做法是：
- 给图片父容器（如
.card）加aspect-ratio: 4/3或1/1 - 图片本身设
width: 100%; height: 100%; object-fit: cover; - 避免只写
max-width: 100%——高度自由伸缩，object-fit就没锚点可裁
移动端尤其要注意：rpx 单位在小程序里可用，但在 Web 中请统一用 px 或 rem，别混用单位导致响应失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
