fix(doc-home): align card grid columns

Author: lilin90

src/components/MDXComponents/DocHome.tsx

@@ -341,7 +341,10 @@ export function DocHomeCardContainer(props: any) {
           sm: "grid",
         },
         flexDirection: "column",
-        gridTemplateColumns: "repeat(auto-fit, minmax(224px, 30%))",
+        gridTemplateColumns: {
+          sm: "repeat(2, minmax(0, 1fr))",
+          lg: "repeat(3, minmax(0, 1fr))",
+        },
         gap: "1.25rem",
         justifyContent: "start",
 
@@ -363,6 +366,7 @@ interface DocHomeCardProps {
   icon: string;
   label: string;
   colSpan?: 1 | 2 | 3;
+  colspan?: 1 | 2 | 3;
   actionBtnLabel?: string;
   ctaGraphic?: string;
 }
@@ -374,9 +378,11 @@ export function DocHomeCard(props: React.PropsWithChildren<DocHomeCardProps>) {
     icon = "global-tidb-product",
     label,
     colSpan,
+    colspan,
     actionBtnLabel,
     ctaGraphic,
   } = props;
+  const cardColSpan = colSpan ?? colspan;
 
   return (
     <Box
@@ -391,7 +397,12 @@ export function DocHomeCard(props: React.PropsWithChildren<DocHomeCardProps>) {
         padding: "24px",
         transition: ".5s",
         border: `1px solid ${theme.palette.carbon[400]}`,
-        gridColumn: colSpan ? `span ${colSpan}` : undefined,
+        gridColumn: cardColSpan
+          ? {
+              sm: `span ${Math.min(cardColSpan, 2)}`,
+              lg: `span ${cardColSpan}`,
+            }
+          : undefined,
 
         "&:hover": {
           background: