diff --git a/src/components/sections/RecentPostsSection.astro b/src/components/sections/RecentPostsSection.astro
index 112bb48..5c0aa82 100644
--- a/src/components/sections/RecentPostsSection.astro
+++ b/src/components/sections/RecentPostsSection.astro
@@ -23,7 +23,11 @@ const { posts, title, subTitle } = Astro.props;
       </span>
     </div>
   </div>
-  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-    {posts.map((b) => <BlogCard post={b} />)}
+  <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
+    {posts.map((b) => (
+      <div class="break-inside-avoid mb-6">
+        <BlogCard post={b} />
+      </div>
+    ))}
   </div>
 </section>