画廊

Gallery

布局模式也叫：图片墙、相册布局、图库、图片网格、Photo Gallery

一句话：以图片为绝对主角的展示布局，同比例缩略图紧密排成网格，几乎不带文字，点击后放大查看并可左右切换。

详细解释

画廊用来展示一组图片或视频，比如相册、作品集、素材库、商品实拍图。缩略图按网格紧密排列，间距很小，通常裁成统一比例（正方形或 4:3），文字最多是悬停时出现的一行文件名。点击任意一张会打开大图浏览层（常叫灯箱 Lightbox），可以左右切换、缩放、查看原图。

它和卡片网格的区别是：卡片网格每张卡片有标题、描述、按钮，图文并重；画廊里图片就是全部内容，文字可以没有。它和瀑布流的区别是：瀑布流保留图片原始比例、错落排列，通常还带标题和作者；画廊一般裁成统一比例、行列整齐，强调一次看到尽量多的图。

商品详情页里「一张大图配一排小缩略图」的形式，也是画廊的一种变体。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

用画廊（Gallery）布局展示相册：缩略图裁成 1:1 正方形，桌面每行 6 张、手机每行 3 张，间距 4px，不显示文字，悬停时叠加半透明遮罩和文件名；点击打开全屏大图浏览，支持左右切换、方向键和 Esc 关闭，底部显示「3 / 24」。缩略图使用小尺寸图片并懒加载。

统一比例的缩略图以很小的间距排成整齐网格，点击任意一张弹出全屏大图查看层，可前后切换。