From 3b10fbd69fa25a8b1c609ed1db90589f347f7a47 Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Sat, 27 Jun 2026 03:28:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20IdeaCard=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=AE=BD=E5=BA=A6=E5=92=8C=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=EF=BC=9B=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BD=91=E6=A0=BC=E5=B8=83=E5=B1=80=E4=B8=BA?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/index/IdeaCard.vue |  2 ++
 app/pages/index/index.vue         | 16 ++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

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>