瀑布流布局（Masonry Layout）是什么：效果预览与 AI 设计提示词

效果预览

适合用在哪

图片墙、博客列表、作品集、商品列表等卡片高度不一致的场景。

容易踩的坑

CSS columns 是先纵后横排序，按时间排列的内容会在视觉上错乱。
图片未声明宽高或 aspect-ratio，加载时列高不断跳动，CLS 远超 0.1。
键盘 Tab 顺序与视觉顺序不一致，用户焦点在列与列之间来回跳。

设计提示词 · Prompt

瀑布流布局（Masonry Layout）：CSS columns 最简单——column-count:2 到 4（响应式），column-gap 16-24px，每个卡片加 break-inside:avoid 防止被拦腰截断。卡片高度由内容自然决定，图片使用不同宽高比（4:3、1:1、3:4 混搭）制造错落感。更精细的控制用 CSS Grid + grid-row:span N，或 JS Masonry 库。卡片统一 12-16px 圆角、1px 描边，封面图圆角只保留上部。

Masonry Layout: CSS columns is the simplest — column-count:2 to 4 (responsive), column-gap 16-24px, and give each card break-inside:avoid so it doesn't get cut in half. Card height is determined naturally by content; mix images of different aspect ratios (4:3, 1:1, 3:4) to create a staggered feel. For finer control use CSS Grid + grid-row:span N, or a JS Masonry library. Cards share a 12-16px radius and 1px stroke, with cover images rounded only at the top.

常见搭配

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

灯箱Lightbox 无限滚动Infinite Scroll 模糊占位加载Blur-up Loading 筛选标签Filter Chips

演示 HTML 结构

<div class="s d-masonry">
  <div class="d-masonry__c">
    <div class="d-img d-img--warm" style="height:54px"></div>
    <div class="d-masonry__c__bd"><span class="d-masonry__ln" style="width:88%"></span><span class="d-masonry__ln" style="width:60%"></span></div>
  </div>
  <div class="d-masonry__c">
    <div class="d-img d-img--cool" style="height:34px"></div>
    <div class="d-masonry__c__bd"><span class="d-masonry__ln" style="width:80%"></span><span class="d-masonry__ln" style="width:52%"></span></div>
  </div>
  <div class="d-masonry__c">
    <div class="d-img d-img--green" style="height:42px"></div>
    <div class="d-masonry__c__bd"><span class="d-masonry__ln" style="width:74%"></span><span class="d-masonry__ln" style="width:56%"></span></div>
  </div>
</div>