相册类页面首选grid布局实现自适应图片网格，次选flex实现横向滚动；必须用srcset做响应式图片适配，禁用float/inline-block等过时方案。
相册类页面的核心诉求是「图片优先、结构轻量、缩放可控、加载不卡」，不是套模板，而是选对布局模型。Grid 和 Flex 是目前最直接有效的两个方案，其他如浮动、表格、绝对定位都容易在响应式场景下翻车。
用 display: grid 布局多图网格（推荐首选）
Grid 天然适合等距、自适应的图片阵列，尤其当你要控制列数、间隙、最小宽度时，比 Flex 更精准。
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 每张图至少 280px 宽，超出自动换行，移动端也能保持单列 - 间隙统一用
gap: 12px，别混用margin，否则在justify-content: center下容易错位 - 图片容器必须设
overflow: hidden，否则object-fit: cover可能漏出多余边缘 - 避免给
img直接设固定宽高，应让父容器约束尺寸，img用width: 100%; height: 100%; object-fit: cover;
用 display: flex 实现横向滚动相册（适合小图集或封面流）
Flex 在单行滚动、无限轮播、或首屏预览图这类场景下更灵活，但要注意容器宽度和溢出控制。
- 父容器加
overflow-x: auto; scroll-snap-type: x mandatory;，子项加scroll-snap-align: start;，能启用原生滚动吸附 - 别忘了加
-webkit-overflow-scrolling: touch，否则 iOS 上滑动卡顿 - Flex 容器禁用
flex-wrap，否则滚动失效；子项用flex: 0 0 auto防止被压缩 - 如果图片数量少于 3 张，建议 fallback 到 Grid，否则留白难看且交互意图模糊
为什么不用 float 或 inline-block？
这两个方案在现代相册页里基本是历史包袱。它们无法自动处理换行对齐、间隙坍塌、垂直居中等问题，而且一旦加入懒加载或动态插入图片，极易出现重排错位。
-
float导致父容器高度塌陷，必须额外清浮，而clear在响应式断点变化时行为不可控 -
inline-block会把 HTML 中的换行符/空格解析为 4px 左右空白，靠注释或负 margin 修复反而增加维护成本 - 两者都不支持
gap，也无法与object-fit、aspect-ratio等现代图像控制属性协同工作
picture + srcset 不是可选项，是必选项
相册页图片体积大，不做资源适配，用户流量和加载体验会双崩。只写一个 src 就上线，等于默认放弃移动端用户。
- 至少提供两档：
srcset="photo-small.jpg 480w, photo-medium.jpg 1024w, photo-large.jpg 1920w"+sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw" -
<picture></picture>仅在需要格式切换（如 WebP → JPEG）或艺术指导（裁剪不同焦点）时才用，别为了“看起来高级”硬套 - 别忽略
loading="lazy"，但首页首屏 2–3 张图要手动删掉这个属性，否则可能触发浏览器延迟加载 bug
真正难的不是写几行 CSS，而是决定每张图该以什么比例呈现、在什么设备上截哪一块、加载失败时 fallback 文案怎么写——这些细节没对齐，再漂亮的模板也只是画皮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
