Masonry Flow

瀑布流布局

stylekitMITDashboard · dashboardProfessional · professionalLight · lightMedium · mediumBlue · blueMedium · mediumSerif · serifGeneral · general

Pinterest 风格的不等高卡片瀑布流布局，通过 CSS columns 或 masonry grid 实现自然流动的视觉效果，适合图片展示、作品集、社交媒体。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Masonry Flow" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/masonry-flow · bfa7da909e86 · © AnxForever

Do

使用 CSS columns 实现简单瀑布流 columns-2 md:columns-3 lg:columns-4
或使用 CSS Grid masonry（需浏览器支持）grid-rows-[masonry]
卡片添加 break-inside-avoid 防止内容断裂
统一卡片宽度，高度自适应内容
保持列间距一致 gap-4 或 gap-6
添加加载动画和懒加载图片
响应式调整列数 columns-1 sm:columns-2 lg:columns-3
卡片使用 group 类，图片在 overflow-hidden 内 group-hover:scale-105 duration-700 ease-out（Confined Zoom，永不突破容器）

Don't

禁止强制所有卡片等高（失去瀑布流特色）
禁止卡片宽度不一致
禁止间距不统一
禁止忽略图片加载状态
禁止在小屏幕使用过多列数
禁止图片放大突破 overflow-hidden 容器（Confined Zoom 必须保持边界）
禁止卡片使用生硬的深色边框作为 hover 反馈（用阴影和位移代替）
禁止 hover 位移超过 -translate-y-1（过大的浮起会打断瀑布流视觉连贯性）

Prompt

Create a Pinterest-style photo gallery with masonry layout:
1. Use CSS columns for masonry: columns-2 md:columns-3 lg:columns-4
2. Cards with varying heights (aspect-[3/4], aspect-square, aspect-[4/5])
3. Each card: rounded-xl, overflow-hidden, shadow on hover
4. Image with lazy loading and hover scale effect
5. Optional overlay with title on hover
6. Filter tabs at top (All, Photos, Videos, etc.)
7. Load more button at bottom
All cards use break-inside-avoid, consistent gap-4

---
"Masonry Flow" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Masonry Flow. \"Masonry Flow\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-masonry-flow",
      "license": "MIT",
      "attribution": "\"Masonry Flow\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "foreground": {
      "$type": "color",
      "$value": "#18181b"
    },
    "card": {
      "$type": "color",
      "$value": "#fafafa"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#18181b"
    },
    "primary": {
      "$type": "color",
      "$value": "#1a1a2e"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f5f5f5"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#18181b"
    },
    "accent": {
      "$type": "color",
      "$value": "#e94560"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#ebebeb"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#69696b"
    },
    "border": {
      "$type": "color",
      "$value": "#d7d7d7"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1a1a2e"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Masonry Flow" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86. */
:root {
  --background: #fafafa;
  --foreground: #18181b;
  --card: #fafafa;
  --card-foreground: #18181b;
  --primary: #1a1a2e;
  --primary-foreground: #fafaf9;
  --secondary: #f5f5f5;
  --secondary-foreground: #18181b;
  --accent: #e94560;
  --accent-foreground: #fafaf9;
  --muted: #ebebeb;
  --muted-foreground: #69696b;
  --border: #d7d7d7;
  --destructive: #dc2626;
  --ring: #1a1a2e;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Masonry Flow" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86. */
/** Tailwind theme extend for Masonry Flow (stylekit-masonry-flow) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fafafa",
        "foreground": "#18181b",
        "card": "#fafafa",
        "primary": "#1a1a2e",
        "primary-foreground": "#fafaf9",
        "secondary": "#f5f5f5",
        "accent": "#e94560",
        "muted": "#ebebeb",
        "border": "#d7d7d7",
        "destructive": "#dc2626",
        "ring": "#1a1a2e"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Masonry Flow" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/masonry-flow @ bfa7da909e86. */
@layer base {
:root {
  --background: #fafafa;
  --foreground: #18181b;
  --card: #fafafa;
  --card-foreground: #18181b;
  --primary: #1a1a2e;
  --primary-foreground: #fafaf9;
  --secondary: #f5f5f5;
  --secondary-foreground: #18181b;
  --accent: #e94560;
  --accent-foreground: #fafaf9;
  --muted: #ebebeb;
  --muted-foreground: #69696b;
  --border: #d7d7d7;
  --destructive: #dc2626;
  --ring: #1a1a2e;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}