diff --git a/app/components/index/IdeaCard.vue b/app/components/index/IdeaCard.vue
index f558341..0fcabc8 100644
--- a/app/components/index/IdeaCard.vue
+++ b/app/components/index/IdeaCard.vue
@@ -77,6 +77,8 @@ const formattedDate = computed(() => {
   --card-tilt: 0deg;
   --card-delay: 0ms;
 
+  display: inline-block;
+  width: 100%;
   background: var(--card-bg);
   border: 1px solid var(--card-border);
   border-radius: 12px;
diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue
index 100b90a..3e703bc 100644
--- a/app/pages/index/index.vue
+++ b/app/pages/index/index.vue
@@ -348,11 +348,15 @@ async function loadMore() {
   );
 }
 
-/* ── Cards Grid ── */
+/* ── Cards Grid (Waterfall / Masonry) ── */
 .cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 20px;
+  column-count: 3;
+  column-gap: 20px;
+}
+
+.cards-grid > * {
+  break-inside: avoid;
+  margin-bottom: 20px;
 }
 
 /* ── Empty State ── */
@@ -493,8 +497,8 @@ async function loadMore() {
   }
 
   .cards-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 16px;
+    column-count: 2;
+    column-gap: 16px;
   }
 }
 </style>