SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -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
+<div class="ease-masonry-grid ease-masonry-grid--cols-3">
+  <div class="ease-masonry-item">
+    <img src="photo.jpg" alt="" loading="lazy" />
+    <div class="ease-masonry-item-body">
+      <h3>Title</h3>
+      <p>Description text.</p>
+    </div>
+  </div>
+  <!-- more items -->
+</div>
+```
+
+## 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`.
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Masonry Grid — EaseMotion CSS</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <div class="ease-masonry-grid ease-masonry-grid--cols-3">
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/a/400/300" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Mountain Retreat</h3>
+        <p>Peaceful escape in the hills with panoramic views.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/b/400/500" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>City Skyline</h3>
+        <p>Urban architecture at golden hour.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/c/400/250" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Coastal Walk</h3>
+        <p>Stroll along the shoreline at sunset.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/d/600/280" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Forest Canopy</h3>
+        <p>Lush greenery stretching as far as the eye can see.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/e/400/350" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Desert Dunes</h3>
+        <p>Endless waves of sand under a blazing sun.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/f/400/200" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Night Sky</h3>
+        <p>Stars scattered across a clear, dark canvas.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/g/400/550" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Waterfall</h3>
+        <p>Cascading water cutting through ancient rock.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/h/400/280" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Lavender Fields</h3>
+        <p>Purple rows stretching to the horizon.</p>
+      </div>
+    </div>
+
+    <div class="ease-masonry-item">
+      <img src="https://picsum.photos/seed/i/400/320" alt="" loading="lazy" />
+      <div class="ease-masonry-item-body">
+        <h3>Snow Peaks</h3>
+        <p>Majestic mountains capped in eternal white.</p>
+      </div>
+    </div>
+
+  </div>
+
+</body>
+</html>
@@ -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;
+  }
+}