布局模式 · 内容展示
画廊
Gallery
也叫：图片墙、相册布局、图库、图片网格、Photo Gallery
以图片为绝对主角的展示布局，同比例缩略图紧密排成网格，几乎不带文字，点击后放大查看并可左右切换。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用画廊（Gallery）布局展示相册：缩略图裁成 1:1 正方形，桌面每行 6 张、手机每行 3 张，间距 4px，不显示文字，悬停时叠加半透明遮罩和文件名；点击打开全屏大图浏览，支持左右切换、方向键和 Esc 关闭，底部显示「3 / 24」。缩略图使用小尺寸图片并懒加载。
发给
01判断
你的内容是这样吗？
对照两列，确认画廊是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
缩略图直接加载原图，一页几十张大图拖慢加载
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
点击图片只是新开一个标签页显示原图，没法前后切换
- 03
给每张图配上大段标题和描述，变成了挤满文字的卡片网格
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
统一比例的缩略图以很小的间距排成整齐网格，点击任意一张弹出全屏大图查看层，可前后切换。
组成部分点一下，在上面的线框里标出来
识别特征
- 1大量同比例的缩略图紧密排列，间距很小
- 2几乎没有文字，图片之外的元素很少
- 3有时是一张大图配一排小缩略图
04解释
详细解释
画廊用来展示一组图片或视频，比如相册、作品集、素材库、商品实拍图。缩略图按网格紧密排列，间距很小，通常裁成统一比例（正方形或 4:3），文字最多是悬停时出现的一行文件名。点击任意一张会打开大图浏览层（常叫灯箱 Lightbox），可以左右切换、缩放、查看原图。
它和卡片网格的区别是：卡片网格每张卡片有标题、描述、按钮，图文并重；画廊里图片就是全部内容，文字可以没有。它和瀑布流的区别是：瀑布流保留图片原始比例、错落排列，通常还带标题和作者；画廊一般裁成统一比例、行列整齐，强调一次看到尽量多的图。
商品详情页里「一张大图配一排小缩略图」的形式，也是画廊的一种变体。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-gallery- DOM 选择器
- 没有专门的选择器，靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
galleryphoto-gridimage-gridphotosalbummedia-gridimage-galleryphoto-gallery
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
GalleryImageGalleryPhotoGrid
- 结构特征
根据元素的排列和样式算出来的特征，只用来加分，单独不判定。
网格排列
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30