平铺式相册需用 repeat(auto-fill, minmax(280px, 1fr)) 确保列数自适应且图片不压缩，配合 padding 等于 gap、aspect-ratio + object-fit: cover 锁定比例，并设 align-items: start 防拉伸。
平铺式相册的核心是让所有图片“严丝合缝”填满容器，不留空隙、不拉伸、不跳变——这要求 Grid 轨道计算必须稳定，且图片行为完全受控。硬写 repeat(3, 1fr) 或依赖 gap 默认值，基本都会失败。
用 repeat(auto-fill, minmax()) 替代固定列数
固定列数（如 repeat(3, 1fr)）会导致小屏上图片被压缩、大屏留白；而平铺需要的是“尽可能多列，但每张图宽度不低于阈值”。
-
minmax(280px, 1fr)表示：单列最小 280px，最大可均分剩余空间 -
auto-fill会生成完整轨道线（含可能的空轨道），保证gap行为稳定；换成auto-fit在justify-content: center下容易吞掉边缘间隙 - 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
用 padding 补齐 gap 的内外边界缺口
gap 只作用于网格项之间，不会在容器边缘产生留白。直接加 gap: 12px 后，最外侧图片会紧贴容器边框，视觉上不对称。
- 必须给容器加
padding: 12px，值严格等于gap - 避免用
margin：它会让整个网格偏移，破坏与父容器的对齐基准 - 确保
box-sizing: border-box已启用（现代浏览器默认）
用 aspect-ratio + object-fit: cover 锁死图片比例
图片原始尺寸不一，仅靠 width: 100% 会导致格子高度参差、网格行高塌陷或跳动。
- 给每个网格项（如
.photo-item）设aspect-ratio: 4/3（或1/1），而非给<img>自身设宽高 -
<img>上写width: 100%; height: 100%; object-fit: cover;，强制裁剪填充 - 避免只写
max-width: 100%：它放任容器浮动，Grid 无法准确分配轨道空间
禁用隐式拉伸，显式控制对齐行为
Grid 默认 align-items: stretch 会让图片被拉高至行高，尤其当某张图特别高时，整行都被撑开，破坏平铺感。
- 容器必须声明
align-items: start，防止纵向拉伸 - 删掉
grid-auto-rows（除非你真要统一行高）；它会覆盖aspect-ratio的自然计算 - 若需微调垂直对齐（如文字说明在图下方），用
align-self: start作用于单个项，而非全局
真正难的不是写出这几行 CSS，而是理解 minmax() 是“最小宽度优先”的弹性函数，以及 auto-fill 和 auto-fit 在空轨道处理上的差异——选错一个，平铺效果就会在 iPad 横屏和桌面端之间突然跳列或漏间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
