Made card grids not ass

2025-11-23 01:51:14 -07:00
parent b159236e59
commit b87357c175
7 changed files with 71 additions and 21 deletions
--- a/src/pages/posts.astro
+++ b/src/pages/posts.astro
@@ -21,9 +21,25 @@ const sortedPosts = posts.sort(
            Posts
        </h1>
        <div
-            class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto"
+            class:list={[
+                sortedPosts.length <= 2
+                    ? "flex flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto px-4"
+                    : "columns-1 sm:columns-2 lg:columns-3 gap-4 sm:gap-6 max-w-6xl mx-auto px-4",
+            ]}
        >
-            {sortedPosts.map((post) => <PostCard post={post} />)}
+            {
+                sortedPosts.map((post) => (
+                    <div
+                        class:list={[
+                            sortedPosts.length <= 2
+                                ? "w-full sm:w-96"
+                                : "inline-block break-inside-avoid w-full",
+                        ]}
+                    >
+                        <PostCard post={post} />
+                    </div>
+                ))
+            }
        </div>

        {