From ac85e11daed69d6d18ea76cf608957b319e66b1d Mon Sep 17 00:00:00 2001
From: Hernan Alvarado <hernanvid123@gmail.com>
Date: Sat, 19 Oct 2024 11:58:48 -0500
Subject: [PATCH] chore: improve styles in CSS and CSS-in-JS

---
 app/styling/css-modules/styles.module.css | 8 +-------
 app/styling/global-css/styles.css         | 8 +-------
 app/styling/styled-components/page.tsx    | 2 +-
 app/styling/styled-jsx/page.tsx           | 8 +-------
 app/styling/tailwind/page.tsx             | 2 +-
 next-env.d.ts                             | 2 +-
 6 files changed, 6 insertions(+), 24 deletions(-)

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 7ead53333..92f36beb6 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 />
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..40c3d6809 100755
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.