HomeStylesTemplates
StyleKit
StylesTemplates
  1. Home
  2. /Styles
  3. /Masonry Flow
Style Catalog/Masonry Flow

Masonry Flow

瀑布流布局

B
87/100Good

Pinterest-style masonry layout with variable-height cards, achieved through CSS columns or masonry grid for a naturally flowing visual effect. Ideal for image galleries, portfolios, and social media.

masonry layoutmasonry gridPinterest stylewaterfall layoutCSS columnsvariable height cardsimage galleryphoto wallportfolio gridinfinite scrollresponsive gallery
View Full Showcase →Templates

Best For

masonry layout / masonry grid / Pinterest style

Primary Move

Use CSS columns for simple masonry columns-2 md:columns-3 lg:columns-4

Watch Out

Do not force all cards to equal height (loses masonry character)

Showcase Entry

Live preview of the showcase page. Click to explore the full experience.

View Full Showcase →

Color Palette

Primary

#1a1a2e

Secondary

#f5f5f5

Accent 1

#e94560

Accent 2

#16c79a

Accent 3

#ffd460

Accent 4

#7579e7

AI ImplementationComponent PreviewReadinessFAQExportsRatings & Feedback

AI Implementation

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

  • -When AI should generate UI directly
  • -When repeated outputs must stay consistent
  • -When style drift is the main risk

How to use

  • -Copy the full prompt
  • -Append the concrete requirement
  • -Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Masonry Flow
style_slug: masonry-flow
style_source: /styles/masonry-flow

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a frontend expert specializing in Masonry Flow layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT make all cards the same height (defeats masonry purpose)
- Do NOT use inconsistent card widths
- Do NOT use inconsistent gaps
- Do NOT ignore image loading states
- Do NOT use too many columns on mobile

## Must Follow

- Use CSS columns: columns-2 md:columns-3 lg:columns-4
- Prevent break: break-inside-avoid on cards
- Consistent gap: gap-4 or column-gap equivalent
- Card widths: 100% of column
- Card heights: auto (content-driven)
- Responsive columns: reduce on smaller screens

## Layout Structure

Container:
- columns-1 sm:columns-2 lg:columns-3 xl:columns-4
- gap-4 (use column-gap and margin-bottom)

Card:
- break-inside-avoid
- mb-4 (margin bottom for spacing)
- rounded-xl overflow-hidden
- Full width within column

## Image Handling

- Always use aspect-ratio or height constraints
- Add loading="lazy" for performance
- Show placeholder during load
- Use object-cover for consistent fit

## Responsive

Mobile (< 640px): columns-1
Tablet (640px - 1024px): columns-2
Desktop (1024px+): columns-3 or columns-4

## Animation & Interaction Rules

- Confined Zoom: Image scaling must occur within overflow-hidden container, recommend group-hover:scale-105 + duration-700.
- Subtle Elevation: Hover displacement limited to -translate-y-1, using diffused shadow rather than hard borders to express focus.
- Overlay Reveal: Image overlay and action buttons use opacity + translate combination for gradual reveal, without changing card main dimensions.
- Action Snappiness: Top filter and category buttons use duration-200, ensuring fast switching feedback.

## Self-Check

After generating code, verify:
1. Cards have varying heights
2. Using break-inside-avoid
3. Consistent gaps
4. Images have aspect ratios
5. Responsive column count

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- force all cards to equal height (loses masonry character)
- use inconsistent card widths
- use inconsistent spacing
- ignore image loading states
- use too many columns on small screens
- let image zoom break the overflow-hidden container (Confined Zoom must maintain boundaries)
- use harsh dark borders as hover feedback on cards (use shadows and displacement instead)
- let hover displacement exceed -translate-y-1 (excessive lift breaks masonry flow visual continuity)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not force all cards to equal height (loses masonry character)
- [ ] do not use inconsistent card widths
- [ ] do not use inconsistent spacing
- [ ] do not ignore image loading states
- [ ] do not use too many columns on small screens

Component Templates

Component Preview

按钮

瀑布流风格的简洁按钮，带有 Subtle Elevation 和 Action Snappiness 效果

Frontend Readiness

Dark Mode, States, Motion, and Accessibility

This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.

Overall

51%

Fallback

Dark Mode

0%

Missing

UI States

79%

Partial

Motion

70%

Partial

A11y

70%

Partial

Performance

35%

Fallback

Key State Coverage

light
HoverFocus VisibleDisabledLoadingEmptyErrorSuccess

Button

Default / Hover / Focus Visible / Active / Disabled

Input

Default / Hover / Focus Visible / Disabled / Error

Card

Default / Hover / Focus Visible / Loading / Skeleton

Form

Default / Focus Visible / Disabled / Loading / Error

Implementation Notes

  • No curated dark-mode contract exists yet.
  • Check contrast in both light and dark modes.
  • Check heavy shadows, blur, large media, and scroll-linked effects manually.
  • No style-specific performance cost profile has been curated yet.

FAQ

Masonry Flow — Frequently Asked Questions

01What is the Masonry Flow design style?
Pinterest-style masonry layout with variable-height cards, achieved through CSS columns or masonry grid for a naturally flowing visual effect. Ideal for image galleries, portfolios, and social media. Its core principle: Masonry Flow is a layout that mimics brickwork, where cards are arranged in columns with varying heights, creating a naturally flowing visual effect.
02What colors does Masonry Flow use?
Masonry Flow uses #1a1a2e as its primary color and #f5f5f5 as its secondary color, with accent colors #e94560, #16c79a, #ffd460, #7579e7. Every hex value can be copied from the palette on this page.
03How do I apply Masonry Flow correctly?
Key practices: Use CSS columns for simple masonry columns-2 md:columns-3 lg:columns-4. Or use CSS Grid masonry (requires browser support) grid-rows-[masonry]. Cards add break-inside-avoid to prevent content breaking.
04What are common mistakes with Masonry Flow?
Avoid: Do not force all cards to equal height (loses masonry character). Do not use inconsistent card widths. Do not use inconsistent spacing.
05How do I prompt AI to generate Masonry Flow UI?
Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: masonry layout, masonry grid, Pinterest style, waterfall layout.
Global Styles

Global CSS

css
/* Masonry Flow Global Styles */

/* CSS Columns based masonry */
.masonry-grid {
  columns: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .masonry-grid {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    columns: 3;
  }
}

@media (min-width: 1280px) {
  .masonry-grid {
    columns: 4;
  }
}

/* Prevent card breaking */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Card hover effects */
.masonry-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Image loading placeholder */
.masonry-item img {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loaded state */
.masonry-item img.loaded {
  background: none;
  animation: none;
}
/* Masonry Flow Design Tokens */
:root {
  --masonry-flow-primary: #1a1a2e;
  --masonry-flow-secondary: #f5f5f5;
  --masonry-flow-accent: #e94560;
  --masonry-flow-glow: rgba(26, 26, 46, 0.3);
}

.masonry-flow-card {
  position: relative;
  overflow: hidden;
}

.masonry-flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.05), transparent);
  pointer-events: none;
}

.masonry-flow-card:hover::before {
  opacity: 1;
}

.masonry-flow-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 46, 0.08);
}

.masonry-flow-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.masonry-flow-animate-in {
  animation: masonry-flow-fade-in 0.5s ease-out both;
}

Compatible Visual Styles

Try Pairing

Masonry Flow is a layout pattern that can be paired with the following visual styles.

Glassmorphism

玻璃拟态

Minimalist Flat

极简扁平风

Soft UI

柔和界面风

Natural Organic

自然有机风

Editorial

编辑杂志风

IDE Integration

IDE Configuration Export

Download configuration files for AI coding assistants to generate code in this style.

Style Pack

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Design Philosophy

Masonry Flow is a layout that mimics brickwork, where cards are arranged in columns with varying heights, creating a naturally flowing visual effect.

Accessibility

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

87

Overall Score

Grade: B - Good

Contrast Ratios

Score: 92/100Average Ratio: 10.92:1
AA PassAAA Fail
ContextColorsRatioAAAAA
Text on secondary background
/#18181b / #ffffff
17.72:1
Button primary
/#ffffff / #18181b
17.72:1
Text on accent 1
/#18181b / #e94560
4.63:1
Text on accent 2
/#18181b / #16c79a
8.16:1
Text on accent 3
/#18181b / #ffd460
12.52:1
Text on accent 4
/#18181b / #7579e7
4.76:1

Readability

Score

77/100

Font Size

text-sm md:text-base

Font Weight

font-semibold tracking-tight

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.

Design Recipes

Recommended Combinations with Masonry Flow

These curated recipes combine this style with layouts and animations, optimized for specific use cases.

Minimal Commerce

Let products shine with minimal distractions.

minimalist-flatmasonry-flow+2
eleganthigh-conversionlight

StyleKit

A curated web design style library to help AI generate better-looking websites.

FeedbackSupport Maintenance
Explore+
StylesTemplatesAnimationsResource LibraryPromptsCollections
Learn+
FoundationsGuideRecipesChangelogBlog
Trust+
AboutContactPrivacyTermsSupport UsRefunds

(c) 2026 StyleKit. Open source project.

闄旾CP澶?025065501鍙?3

Colophon/SK — 2026

Built with the Editorial style

01FeedbackTell us what could work better02Support MaintenanceIf StyleKit helps your workflow, voluntary support helps cover servers, domains, and ongoing upkeep.

StyleKit

A curated web design style library to help AI generate better-looking websites.

GitHub Repository

Explore

StylesTemplatesAnimationsResource LibraryPromptsCollections

Learn

FoundationsGuideRecipesChangelogBlog

Dispatch

Get notified when new styles, templates and tools ship.

Stay Updated

By subscribing, you agree to our Privacy Policy and Terms.

(c) 2026 StyleKit. Open source project.

AboutContactPrivacyTermsSupport UsRefunds/陕ICP备2025065501号-3

StyleKit