css grid自适应相册用repeat(auto-fit, minmax(280px,1fr))动态列数，配padding等于gap防贴边，.grid-item设aspect-ratio、图片width/height全100%加object-fit:cover保形。
用 CSS Grid 实现自适应相册照片墙，核心是让列数随容器宽度自动变化，同时每张图保持合理尺寸和比例，不拉伸、不变形、不贴边。
用 repeat(auto-fit, minmax()) 动态算列数
写法示例：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
这行代码的意思是：浏览器尽可能多地创建列，每列最小 280px（适合手机横屏查看），最大占均分后的剩余空间（即 1fr）。
- 小屏（如手机竖屏）→ 自动缩为 1–2 列，图片不会被压扁
- 中屏（如平板）→ 显示 3–4 列，利用空间又不拥挤
- 大屏（如桌面）→ 扩展到 5–6 列，填满宽度
- 不用 media query，纯 CSS 响应式
补 padding 匹配 gap，解决边缘紧贴问题
gap 只加在格子之间，不产生内外边距。所以最外侧图片会直接顶到容器边缘，视觉上不对称。
- 给容器加 padding: 12px，数值必须等于 gap（比如 gap: 12px）
- 避免用 margin，否则破坏网格基准线
- box-sizing: border-box 默认已启用，无需额外设置
图片自身不撑破、不变形
Grid 管布局，但图片默认行为仍可能拉伸或留白。关键控制三步：
- 给图片容器（如 .grid-item）设 aspect-ratio: 1 / 1（推荐正方形相册）或按需调整
- 图片本身写 width: 100%; height: 100%; object-fit: cover;
- 避免只设 width: 100% 而不设 height，否则高度由原图决定，格子高低不一
auto-fit 和 auto-fill 别混用
两者处理“空列”的逻辑不同，直接影响排版稳定性：
- auto-fit：隐藏未填充的轨道，让已有列均分剩余空间 → 更紧凑，适合多数相册场景
- auto-fill：保留所有可能列（含空列），可能导致小屏下列宽骤降、图片被压缩
- 除非你需要严格对齐网格线（比如配合 justify-content: center 做居中留白），否则优先选 auto-fit
