IMAGE & MEDIA
画廊网格Image Gallery Grid
大小格子混拼的图片墙：一张 2×2 主图压阵，小图错落围绕。
效果预览
主图 · 2×1
竖图 · 1×2
适合用在哪
作品集、房源相册、旅行攻略、电商详情。
容易踩的坑
- 所有格子都用原图尺寸加载，几十张大图让首屏流量超过 10MB。
- 图片无 alt 或 alt 全是文件名，读屏用户只听到一串无意义编号。
- 网格跨度混排后出现空洞，忘了用 grid-auto-flow:dense 填补。
设计提示词 · Prompt
画廊网格（Image Gallery Grid）：CSS Grid 3-4 列、grid-auto-rows 固定值（120-160px）、gap 8-16px；一张主图 span 2×2、几张横图 span 2×1、竖图 span 1×2，其余 1×1——同形态图片（全是横图）会呆板，必须混跨。图片 object-fit:cover 统一裁切 + 悬停轻微放大 + 底部渐变Caption。整墙点击进灯箱。图片选择有主次：最大的格子放最想卖的图。格子圆角统一（8-12px）。移动端简化为 2 列 + 主图全宽。
Image Gallery Grid: CSS Grid with 3-4 columns, a fixed grid-auto-rows value (120-160px), gap 8-16px; one hero image spans 2×2, a few landscape images span 2×1, portrait images span 1×2, the rest 1×1 — images of the same shape (all landscape) look rigid, so spans must be mixed. Images use object-fit:cover for uniform cropping + slight zoom on hover + a bottom gradient caption. Clicking anywhere on the wall opens a lightbox. Prioritize images: put the one you most want to sell in the largest cell. Keep cell corner radius consistent (8-12px). On mobile, simplify to 2 columns with the hero image full width.
常见搭配
同一页面里经常和「画廊网格」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-gallery"> <div class="d-gallery__item d-gallery__item--w d-img d-img--cool"><span class="d-gallery__cap">主图 · 2×1</span></div> <div class="d-gallery__item d-img d-img--warm"></div> <div class="d-gallery__item d-img d-img--green"></div> <div class="d-gallery__item d-gallery__item--h d-img d-img--dark"><span class="d-gallery__cap">竖图 · 1×2</span></div> </div>