From 36e212e04379ee271b4ddebe86dc25d7dc720c13 Mon Sep 17 00:00:00 2001 From: prakash meena Date: Thu, 4 Jun 2026 17:44:18 +0530 Subject: [PATCH] feat: add Masonry Grid Component (#1202) --- submissions/examples/masonry-grid/README.md | 35 ++++++ submissions/examples/masonry-grid/demo.html | 88 +++++++++++++ submissions/examples/masonry-grid/style.css | 130 ++++++++++++++++++++ 3 files changed, 253 insertions(+) create mode 100644 submissions/examples/masonry-grid/README.md create mode 100644 submissions/examples/masonry-grid/demo.html create mode 100644 submissions/examples/masonry-grid/style.css diff --git a/submissions/examples/masonry-grid/README.md b/submissions/examples/masonry-grid/README.md new file mode 100644 index 00000000..0c1d4014 --- /dev/null +++ b/submissions/examples/masonry-grid/README.md @@ -0,0 +1,35 @@ +# Masonry Grid Component + +A CSS-only masonry (waterfall / Pinterest-style) layout using the `column-count` approach for maximum browser compatibility. Items flow vertically within each column before wrapping to the next. Includes staggered fade-in entrance animation, hover lift effect, and responsive column counts. + +## Classes + +| Class | Description | +|---|---| +| `ease-masonry-grid` | Grid container (default 3 columns) | +| `ease-masonry-grid--cols-2` | 2 columns | +| `ease-masonry-grid--cols-3` | 3 columns | +| `ease-masonry-grid--cols-4` | 4 columns | +| `ease-masonry-item` | Individual grid item | +| `ease-masonry-item-body` | Text content area inside an item | +| `ease-masonry-item--wide` | Visual hint for spanning 2 columns (CSS Grid only) | +| `ease-masonry-item--tall` | Visual hint for spanning 2 rows (CSS Grid only) | + +## Usage + +```html +
+
+ +
+

Title

+

Description text.

+
+
+ +
+``` + +## Why it fits EaseMotion CSS + +Pure CSS masonry layout with no JavaScript required. Staggered fade-in animation (`ease-kf-masonry-fade-in`), hover lift effect, responsive breakpoints for mobile/tablet/desktop, and uses `var(--ease-gap)` / `var(--ease-radius)` design tokens. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/masonry-grid/demo.html b/submissions/examples/masonry-grid/demo.html new file mode 100644 index 00000000..66bf8df3 --- /dev/null +++ b/submissions/examples/masonry-grid/demo.html @@ -0,0 +1,88 @@ + + + + + + Masonry Grid — EaseMotion CSS + + + + +
+ +
+ +
+

Mountain Retreat

+

Peaceful escape in the hills with panoramic views.

+
+
+ +
+ +
+

City Skyline

+

Urban architecture at golden hour.

+
+
+ +
+ +
+

Coastal Walk

+

Stroll along the shoreline at sunset.

+
+
+ +
+ +
+

Forest Canopy

+

Lush greenery stretching as far as the eye can see.

+
+
+ +
+ +
+

Desert Dunes

+

Endless waves of sand under a blazing sun.

+
+
+ +
+ +
+

Night Sky

+

Stars scattered across a clear, dark canvas.

+
+
+ +
+ +
+

Waterfall

+

Cascading water cutting through ancient rock.

+
+
+ +
+ +
+

Lavender Fields

+

Purple rows stretching to the horizon.

+
+
+ +
+ +
+

Snow Peaks

+

Majestic mountains capped in eternal white.

+
+
+ +
+ + + diff --git a/submissions/examples/masonry-grid/style.css b/submissions/examples/masonry-grid/style.css new file mode 100644 index 00000000..a41ba63d --- /dev/null +++ b/submissions/examples/masonry-grid/style.css @@ -0,0 +1,130 @@ +/* ============================================================ + EaseMotion CSS — Masonry Grid Component + Issue #1202 + ============================================================ */ + +/* ── Container (column-count approach) ────────────────────── */ + +.ease-masonry-grid { + column-count: 3; + column-gap: var(--ease-gap, 16px); + padding: var(--ease-gap, 16px); + max-width: 1200px; + margin: 0 auto; +} + +/* ── Column count modifiers ───────────────────────────────── */ + +.ease-masonry-grid--cols-2 { column-count: 2; } +.ease-masonry-grid--cols-3 { column-count: 3; } +.ease-masonry-grid--cols-4 { column-count: 4; } + +/* ── Item ─────────────────────────────────────────────────── */ + +.ease-masonry-item { + break-inside: avoid; + page-break-inside: avoid; + margin-bottom: var(--ease-gap, 16px); + border-radius: var(--ease-radius, 0.75rem); + overflow: hidden; + background: rgba(255, 255, 255, 0.04); + border: 1.5px solid rgba(255, 255, 255, 0.06); + animation: ease-kf-masonry-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; + transition: + transform var(--ease-speed-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1), + box-shadow var(--ease-speed-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1); +} + +.ease-masonry-item:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); +} + +/* ── Staggered entrance delays ────────────────────────────── */ + +.ease-masonry-item:nth-child(1) { animation-delay: 0.00s; } +.ease-masonry-item:nth-child(2) { animation-delay: 0.05s; } +.ease-masonry-item:nth-child(3) { animation-delay: 0.10s; } +.ease-masonry-item:nth-child(4) { animation-delay: 0.15s; } +.ease-masonry-item:nth-child(5) { animation-delay: 0.20s; } +.ease-masonry-item:nth-child(6) { animation-delay: 0.25s; } +.ease-masonry-item:nth-child(7) { animation-delay: 0.30s; } +.ease-masonry-item:nth-child(8) { animation-delay: 0.35s; } +.ease-masonry-item:nth-child(9) { animation-delay: 0.40s; } +.ease-masonry-item:nth-child(10) { animation-delay: 0.45s; } + +/* ── Images inside items ──────────────────────────────────── */ + +.ease-masonry-item img { + width: 100%; + height: auto; + display: block; +} + +/* ── Card body ────────────────────────────────────────────── */ + +.ease-masonry-item-body { + padding: 16px; +} + +.ease-masonry-item-body h3 { + margin: 0 0 4px; + font-size: var(--ease-text-sm, 0.9375rem); + font-weight: 600; + color: rgba(255, 255, 255, 0.9); +} + +.ease-masonry-item-body p { + margin: 0; + font-size: var(--ease-text-xs, 0.8125rem); + color: rgba(255, 255, 255, 0.5); + line-height: 1.5; +} + +/* ── Span modifiers (CSS Grid approach only) ──────────────── */ + +.ease-masonry-item--wide, +.ease-masonry-item--tall { + /* Visual hint: border highlight for grid-span items */ + /* These only take effect with display:grid; grid-template-rows:masonry */ + border-color: rgba(124, 108, 255, 0.25); +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-masonry-fade-in { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ── Responsive ──────────────────────────────────────────── */ + +@media (max-width: 1024px) { + .ease-masonry-grid, + .ease-masonry-grid--cols-4 { + column-count: 2; + } +} + +@media (max-width: 640px) { + .ease-masonry-grid { + column-count: 1; + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-masonry-item { + animation: none; + } + .ease-masonry-item:hover { + transform: none; + } +}