feat: add Masonry Grid Component (#1202)

[Pcmhacker-piro]

Closes #1202

Pull Request Description

Adds a CSS-only masonry grid layout component in submissions/examples/masonry-grid/ using the column-count approach for maximum browser compatibility, with 3 column count modifiers, staggered fade-in animation, and responsive breakpoints.

---

Type of Change

• 🧩 New component

---

Submission Checklist

• All changes are inside submissions/examples/masonry-grid/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A CSS-only masonry/waterfall layout using column-count for widest browser support. Items flow vertically within each column before wrapping to the next.

How does a developer use it?

<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>
</div>
Why does it fit EaseMotion CSS?
Pure CSS masonry with staggered fade-in keyframes (ease-kf-masonry-fade-in), hover lift effect, responsive breakpoints, and design token usage (var(--ease-gap), var(--ease-radius)). Respects prefers-reduced-motion.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
Uses column-count approach for widest browser support. The --wide and --tall modifiers are defined as visual hints for future CSS Grid masonry support but only take effect with display:grid; grid-template-rows:masonry.

Closes #1202

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/masonry-grid

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check thsi