diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1276d93..1bbcb1e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -90,7 +90,7 @@ const acknowledgements = await getAcknowledgements();
       <>
         <hr class="section-rule" />
 
-        <div class="front-essays">
+        <div class={`front-essays ${displayEssays.length < 4 ? `front-essays--${displayEssays.length}` : ""}`}>
           {displayEssays.map((post) => (
             <a href={post.url} class="front-block story-block essay-block">
               <h3 class="story-block-title">{post.title}</h3>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 358999f..d3befeb 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -335,11 +335,19 @@ a {
 
 .front-essays {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+
+  &--1 { grid-template-columns: 1fr; }
+  &--2 { grid-template-columns: repeat(2, 1fr); }
+  &--3 { grid-template-columns: repeat(3, 1fr); }
 
   @media screen and (max-width: 700px) {
     grid-template-columns: 1fr;
+
+    &--1, &--2, &--3 {
+      grid-template-columns: 1fr;
+    }
   }
 }