搭骨架
瀑布流布局
Masonry Layout
「Pinterest 那种布局」「高低不齐的卡片墙」「一列列往下补的布局」「参差不齐的图片流」「瀑布墙」「灵感流排版」
LIVE DEMO真实可交互，动手试试
- 英文名
- Masonry Layout
- 别名 · 俗称
- Pinterest 布局参差卡片流不等高卡片墙瀑布墙
- Web 叫法
- Masonry Layout
- 大白话定义
- 把不同高度的内容块按列往下接，像砖墙一样往下铺，能更省空间。
- 部位拆解
- 列 Columns内容按列分布，而不是按一整行对齐
- 不等高卡片 Cards每张卡高度不同，依次补到最短那列
- 列间距 Gutter列与列之间的固定留白
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
做一个 Masonry Layout 灵感流：3 列卡片，高度按内容自适应，列间距统一，滚动时保持自然接续
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的瀑布流布局（Masonry Layout）。逐一排除：仍在用普通 grid，导致每行被最高卡片撑住一大片空白；图片没加载完成就排版，后续高度变化引起跳动；列宽在小屏没降级，卡片被挤得太窄；卡片顺序按视觉列重排后，键盘和读屏顺序变乱。症状是：