fix: grid estable en home (reemplazar CSS columns rebalanceable por grid con celdas fijas)

This commit is contained in:
Renato
2026-08-05 05:02:47 +08:00
parent f5d631dd03
commit fcb418101e
2 changed files with 6 additions and 3 deletions
+5 -2
View File
@@ -67,9 +67,12 @@ export function InfinitePostGrid({ initialPosts }: { initialPosts: Post[] }) {
return ( return (
<div> <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) => ( {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} /> <PostCard post={post} />
</div> </div>
))} ))}
+1 -1
View File
@@ -89,7 +89,7 @@ export function PostCard({ post, compact = false }: { post: Post; compact?: bool
{/* Metadatos */} {/* Metadatos */}
<div className="flex flex-col gap-1.5 p-3"> <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} {post.title}
</h3> </h3>
<div className="flex items-center justify-between text-[10px] text-[var(--muted)]"> <div className="flex items-center justify-between text-[10px] text-[var(--muted)]">