feat/update-code

src/components/layouts/GridColumn/GridColumn.tsx

@@ -4,6 +4,18 @@ import React from "react";
 import { GridColumnProps } from "./interface";
 import clsx from "clsx";
 
+// Mapping số cột mong muốn trên Desktop (lg/xl) thành class responsive đầy đủ
+const colResponsiveMap: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+  8: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8",
+  12: "grid-cols-3 sm:grid-cols-6 lg:grid-cols-12",
+};
+
 const GridColumn = ({
   children,
   col = 3,
@@ -22,41 +34,19 @@ const GridColumn = ({
         /* ===== GAP ===== */
         sm ? "gap-2" : "gap-4",
 
-        /* ===== DEFAULT COL ===== */
-        {
-          "grid-cols-1": col === 1,
-          "grid-cols-2": col === 2,
-          "grid-cols-3": col === 3,
-          "grid-cols-4": col === 4,
-          "grid-cols-5": col === 5,
-          "grid-cols-6": col === 6,
-          "grid-cols-8": col === 8,
-          "grid-cols-12": col === 12,
-        },
+        /* ===== RESPONSIVE GRID BY COL ===== */
+        colResponsiveMap[col] || "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
 
-        /* ===== RESPONSIVE ===== */
-        "xl:grid-cols-3", // giống default SCSS fallback
-        "lg:grid-cols-2",
-        "md:grid-cols-2",
-        "sm:grid-cols-1",
+        /* ===== CUSTOM OVERRIDES ===== */
+        tabletCol3 && "md:grid-cols-3 lg:grid-cols-3",
+        mobile2 && "grid-cols-2",
 
-        /* ===== CUSTOM RULES ===== */
-        tabletCol3 && "lg:grid-cols-3",
-
-        mobile2 && "sm:grid-cols-2",
-
-        /* ===== COL 4 SPECIAL ===== */
-        col === 4 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"),
-
-        /* ===== COL 5 ===== */
-        col === 5 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"),
-
-        /* ===== SCROLL ===== */
+        /* ===== SCROLL MODES ===== */
         scroll20 &&
           "grid-flow-col auto-cols-[20%] overflow-x-auto snap-x snap-mandatory gap-2",
 
         scrollMobile85 &&
-          "md:grid-cols-none md:grid-flow-col md:auto-cols-[85%] md:overflow-x-auto md:snap-x md:snap-mandatory",
+          "max-md:grid-cols-none max-md:grid-flow-col max-md:auto-cols-[85%] max-md:overflow-x-auto max-md:snap-x max-md:snap-mandatory",
 
         className,
       )}