Use Claude's suggestion on layout

TigerAppsOrg · Nov 8, 2024 · ec584b3 · ec584b3
1 parent 5370b3b
commit ec584b3
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -84,34 +84,40 @@ import { AstroSeo } from "@astrolib/seo";
     .app-grid {
         display: grid;
         gap: 2rem;
-
+        grid-template-columns: 1fr; 
+
         article {
-            grid-column: span 2;
+            width: 100%;
         }
-
-        @media (min-width: 768px) {
-            grid-template-columns: repeat(4, 1fr);
-
+
+        @media screen and (min-width: 768px) {
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            max-width: 100%;
+
+            article {
+                grid-column: span 2;
+            }
+
             article:last-child:nth-child(2n - 1) {
                 grid-column-end: -2;
             }
         }
-
-        @media (min-width: 1280px) {
+        
+        @media screen and (min-width: 1280px) {
             grid-template-columns: repeat(6, 1fr);
-
+            
             article:last-child:nth-child(2n - 1) {
-                grid-column-end: auto
+                grid-column-end: auto;
             }
-
+            
             article:last-child:nth-child(3n - 1) {
                 grid-column-end: -2;
             }
-
+            
             article:nth-last-child(2):nth-child(3n + 1) {
                 grid-column-end: 4;
             }
-
+            
             article:last-child:nth-child(3n - 2) {
                 grid-column-end: 5;
             }