拼贴布局（Collage Grid）是什么：效果预览与 AI 设计提示词

效果预览

"旅行是把日常撕开一道口子。"

适合用在哪

品牌页、作品集首页、活动回顾、编辑内容。

容易踩的坑

元素超过 8 个后版面拥挤，拼贴失去呼吸感，变成杂乱的素材堆。
移动端仍保留多列错落，图片被压到 100px 以下，内容无法辨认。
装饰性贴纸和批注没有 aria-hidden，读屏会念出大量无意义文字。

设计提示词 · Prompt

拼贴布局（Collage Grid）：Grid 2-3 列不等行高，一张大图 span 2 行、其余小图与文字块（引言、数字、日期标签）混排填补空隙——图与文的节奏交替是拼贴的灵魂。每个元素对齐到同一个网格但跨度不同，"乱中有序"。加装饰元素：贴纸标签、手写批注、旋转 2-3° 的元素。图片比例统一裁切（object-fit:cover），圆角可统一或故意对比（大圆角 vs 直角）。适合内容量适中（5-8 个元素）的区块。

Collage Grid: Grid with 2-3 columns and uneven row heights; one large image spans 2 rows, while smaller images and text blocks (quotes, numbers, date labels) fill the gaps — the alternating rhythm of image and text is the soul of a collage. Every element aligns to the same grid but with different spans, "order within chaos." Add decorative elements: sticker labels, handwritten annotations, elements rotated 2-3°. Crop images to consistent ratios (object-fit:cover); corner radii can be uniform or deliberately contrasting (large radius vs. square corners). Suited to sections with a moderate amount of content (5-8 elements).

常见搭配

同一页面里经常和「拼贴布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

杂志式排版Editorial Layout 引文块Blockquote 数字大字排版Numeric Display 贴纸徽章卡Sticker / Badge Card

演示 HTML 结构

<div class="s d-collage">
  <div class="d-collage__item d-img d-img--cool"></div>
  <div class="d-collage__item d-img d-img--warm"></div>
  <div class="d-collage__item" style="background:#fff;border:1px solid var(--i-line);display:flex;align-items:center;padding:0 10px;font-size:9px;color:var(--i-tx2)">"旅行是把日常撕开一道口子。"</div>
</div>