From a9fd3da659b2c731625cdb546dd20ffd977d2970 Mon Sep 17 00:00:00 2001
From: Dorvan <hdxsanjay@gmail.com>
Date: Tue, 23 Jan 2024 10:40:48 +0800
Subject: [PATCH] docs: fix lg layout

---
 docs/go-gin-boilerplate/src/css/tailwind.css | 36 ++++++++++++++++++++
 docs/go-gin-boilerplate/src/pages/index.tsx  |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/go-gin-boilerplate/src/css/tailwind.css b/docs/go-gin-boilerplate/src/css/tailwind.css
index b0a6f30..3aacb60 100644
--- a/docs/go-gin-boilerplate/src/css/tailwind.css
+++ b/docs/go-gin-boilerplate/src/css/tailwind.css
@@ -164,6 +164,10 @@
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -445,6 +449,10 @@ html[data-theme="dark"] .header-github-link:before {
 }
 
 @media (min-width: 640px) {
+  .sm\:grid {
+    display: grid;
+  }
+
   .sm\:w-\[200px\] {
     width: 200px;
   }
@@ -461,6 +469,14 @@ html[data-theme="dark"] .header-github-link:before {
     max-width: 50%;
   }
 
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:p-8 {
     padding: 2rem;
   }
@@ -500,6 +516,26 @@ html[data-theme="dark"] .header-github-link:before {
   .md\:grid {
     display: grid;
   }
+
+  .md\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:max-w-\[50\%\] {
+    max-width: 50%;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/docs/go-gin-boilerplate/src/pages/index.tsx b/docs/go-gin-boilerplate/src/pages/index.tsx
index 1aba009..fe2ae14 100644
--- a/docs/go-gin-boilerplate/src/pages/index.tsx
+++ b/docs/go-gin-boilerplate/src/pages/index.tsx
@@ -166,7 +166,7 @@ export default function Home(): JSX.Element {
             Why use this boilerplate?
           </div>
 
-          <div className=" sm:max-w-[50%] md:grid grid-cols-3 justify-items-center w-max mx-auto gap-6">
+          <div className=" md:grid grid-cols-3 justify-items-center w-max mx-auto gap-6">
             {features.map((item) => {
               return (
                 <div