diff --git a/app/styling/css-modules/styles.module.css b/app/styling/css-modules/styles.module.css
index c434f7b16..11c8bfe3e 100644
--- a/app/styling/css-modules/styles.module.css
+++ b/app/styling/css-modules/styles.module.css
@@ -1,15 +1,9 @@
 .container {
   display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
   gap: 1.5rem /* 24px */;
 }
 
-@media (min-width: 1024px) {
-  .container {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 .skeleton {
   padding: 1rem /* 16px */;
   border-radius: 1rem /* 16px */;
diff --git a/app/styling/global-css/styles.css b/app/styling/global-css/styles.css
index c7b408ef9..8267902e2 100644
--- a/app/styling/global-css/styles.css
+++ b/app/styling/global-css/styles.css
@@ -1,15 +1,9 @@
 .container {
   display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
   gap: 1.5rem /* 24px */;
 }
 
-@media (min-width: 1024px) {
-  .container {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 .skeleton {
   padding: 1rem /* 16px */;
   border-radius: 1rem /* 16px */;
diff --git a/app/styling/styled-components/page.tsx b/app/styling/styled-components/page.tsx
index dc1f3f35c..e632a26ad 100644
--- a/app/styling/styled-components/page.tsx
+++ b/app/styling/styled-components/page.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 const Container = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
   gap: 1.5rem /* 24px */;
 `;
 
diff --git a/app/styling/styled-jsx/page.tsx b/app/styling/styled-jsx/page.tsx
index 60f514a28..62bdd53ec 100644
--- a/app/styling/styled-jsx/page.tsx
+++ b/app/styling/styled-jsx/page.tsx
@@ -70,15 +70,9 @@ export default function Page() {
       <style jsx>{`
         .container {
           display: grid;
-          grid-template-columns: repeat(1, minmax(0, 1fr));
+          grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
           gap: 1.5rem /* 24px */;
         }
-
-        @media (min-width: 1024px) {
-          .container {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-          }
-        }
       `}</style>
     </div>
   );
diff --git a/app/styling/tailwind/page.tsx b/app/styling/tailwind/page.tsx
index c821fa8c5..c0958da13 100644
--- a/app/styling/tailwind/page.tsx
+++ b/app/styling/tailwind/page.tsx
@@ -14,7 +14,7 @@ export default function Page() {
         Styled with Tailwind CSS
       </h1>
 
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div className="grid grid-cols-[repeat(auto-fit,_minmax(9.5rem,_1fr))] gap-6 lg:grid-cols-3">
         <SkeletonCard />
         <SkeletonCard />
         <SkeletonCard />