Media / 02
相册 Gallery
同一组商品图，四种排布各不相同：等分网格适合一眼看全，横向滚动适合按顺序翻，缩略图加主图适合看细节，瀑布流适合保留每张图的原始比例。
① 等分网格
grid · 2 / 3 / 4 列方块比例由 aspect-square 固定，四列在窄屏自动回落到两列；点击任意一张以灯箱查看大图。
② 横向滚动胶片
flex · shrink-0 · overflow-x-auto2026 秋冬系列 · 走秀顺序
横向滚动 →
每张固定宽度 240px 且禁止收缩（shrink-0），容器超出后横向滚动，适合需要保留商品图比例的图集。
③ 缩略图 + 大图
.gal-thumb / .gal-thumb.on商品细节 · 云杉绿针织衫
点击查看大图
缩略图默认 65% 不透明度、悬停或选中时恢复为 100%，并用 2px 边框标注当前项（.gal-thumb.on）；每个缩略图都带 data-lightbox，可直接进入全屏查看。
④ 瀑布流相册
.masonry · 保留原始比例选型看全 → 网格；按序浏览 → 横向滚动；看细节 → 缩略图 + 大图；保留比例 → 瀑布流
灯箱任意元素加 data-lightbox="图片地址" 即可点击进入全屏，遮罩由脚本自动创建
图片模拟本页全部图位用渐变块加文字代替，接入真实图片时替换背景为 img 标签即可