From fcb418101e84fad8928158aaf7ab3dad9e71e0cb Mon Sep 17 00:00:00 2001
From: Renato <renato97@cbcren.online>
Date: Wed, 5 Aug 2026 05:02:47 +0800
Subject: [PATCH] fix: grid estable en home (reemplazar CSS columns
 rebalanceable por grid con celdas fijas)

---
 src/components/infinite-grid.tsx | 7 +++++--
 src/components/post-card.tsx     | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/infinite-grid.tsx b/src/components/infinite-grid.tsx
index 148593a..900df31 100644
--- a/src/components/infinite-grid.tsx
+++ b/src/components/infinite-grid.tsx
@@ -67,9 +67,12 @@ export function InfinitePostGrid({ initialPosts }: { initialPosts: Post[] }) {
 
   return (
     <div>
-      <div className="columns-2 gap-3 sm:gap-4 md:columns-3 xl:columns-4 [column-fill:balance]">
+      {/* Grid estable: celdas fijas, el scroll infinito agrega filas nuevas
+          ABAJO sin re-maquetar lo que ya está en pantalla (a diferencia de
+          CSS columns que re-balancea y mueve los items). */}
+      <div className="grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-3 xl:grid-cols-4">
         {posts.map((post, i) => (
-          <div key={post.id} className="mb-3 sm:mb-4 break-inside-avoid animate-fade-up" style={{ animationDelay: `${Math.min(i, 8) * 40}ms` }}>
+          <div key={post.id} className="animate-fade-up" style={{ animationDelay: `${Math.min(i, 8) * 40}ms` }}>
             <PostCard post={post} />
           </div>
         ))}
diff --git a/src/components/post-card.tsx b/src/components/post-card.tsx
index 17f6715..07c4cc7 100644
--- a/src/components/post-card.tsx
+++ b/src/components/post-card.tsx
@@ -89,7 +89,7 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
 
       {/* Metadatos */}
       <div className="flex flex-col gap-1.5 p-3">
-        <h3 className="line-clamp-2 text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
+        <h3 className="line-clamp-2 min-h-[2.6rem] text-sm font-semibold leading-snug group-hover:text-[var(--accent)] transition-colors">
           {post.title}
         </h3>
         <div className="flex items-center justify-between text-[10px] text-[var(--muted)]">