Merge pull request #329 from chrisbanes/cb/grid-recent-articles

💄 Use grid rather than flexbox for recent articles

assets/css/compiled/main.css

@@ -1446,6 +1446,10 @@ select {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -1653,6 +1657,10 @@ select {
   justify-content: space-between;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .space-y-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -3435,6 +3443,10 @@ body:has(#menu-controller:checked) {
     max-width: 65ch;
   }
 
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3538,6 +3550,10 @@ body:has(#menu-controller:checked) {
     width: auto;
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:justify-start {
     justify-content: flex-start;
   }
@@ -3701,10 +3717,18 @@ body:has(#menu-controller:checked) {
   .xl\:w-1\/4 {
     width: 25%;
   }
+
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1536px) {
   .\32xl\:w-1\/5 {
     width: 20%;
   }
+
+  .\32xl\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }

layouts/partials/recent-articles.html

@@ -8,26 +8,15 @@
 
 {{ if .Site.Params.homepage.cardView | default false }}
 {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
+<section class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-  <div class="flex flex-wrap pl-8 pr-8">
+    style="left: calc(max(-50vw,-800px) + 50%);">
   {{ else }}
-    <section class="w-full">
+<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
-      <div class="flex flex-wrap">
   {{ end }}
-
     {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
     .Site.Params.mainSections)).Pages }}
-
-        {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
-        <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
-          {{ else }}
-          <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
-            {{ end }}
-
       {{ partial "article-link-card.html" . }}
-          </div>
     {{ end }}
-        </div>
 </section>
 {{ else }}
 <section class="space-y-10 w-full">
@@ -37,6 +26,7 @@
   {{ end }}
 </section>
 {{ end }}
+
 {{ if .Site.Params.homepage.showMoreLink | default false }}
 {{ if index .Site.Params.homepage "showRecentItems" }}
 {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}