From 53f2eb041b9479f78ac7e0daf664adb2c69367b5 Mon Sep 17 00:00:00 2001
From: arty0928 <arty0928@konkuk.ac.kr>
Date: Fri, 31 Oct 2025 15:23:37 +0900
Subject: [PATCH 1/2] Draft PR


From 0c80bacf224280708b63534daebde43b2bd73010 Mon Sep 17 00:00:00 2001
From: arty0928 <arty0928@konkuk.ac.kr>
Date: Sat, 8 Nov 2025 23:16:29 +0900
Subject: [PATCH 2/2] Fix: Add responsive ExampleGrid component to prevent code
 block overflow on mobile #475

---
 .../docs/core-concepts/nm-base/page.mdx       | 50 ++++---------------
 .../components/mdx/components/ExampleGrid.tsx | 14 ++++++
 2 files changed, 24 insertions(+), 40 deletions(-)
 create mode 100644 apps/landing/src/components/mdx/components/ExampleGrid.tsx

diff --git a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx
index c8b683b8..0676df4d 100644
--- a/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx
@@ -1,3 +1,5 @@
+import { ExampleGrid } from '@/components/mdx/components/ExampleGrid'
+
 export const metadata = {
   title: 'N/M Base',
   alternates: {
@@ -48,15 +50,7 @@ Class name generation follows these steps:
 
 ### **Basic Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx // Input
     <div>
@@ -75,19 +69,11 @@ Class name generation follows these steps:
     </div>
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **Responsive Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx // Input
     <Box w={[100, 200, 300]} />
@@ -99,19 +85,11 @@ Class name generation follows these steps:
     {/* w: 100px, w: 200px, w: 300px */}
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **Pseudo-selector Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx
     <Box _hover={{ bg: 'red' }} />
@@ -123,19 +101,11 @@ Class name generation follows these steps:
     {/* .g:hover { background: red; } */}
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **File-specific Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx
     <div>
@@ -152,7 +122,7 @@ Class name generation follows these steps:
     </div>
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ## Ad-blocker Compatibility
 
diff --git a/apps/landing/src/components/mdx/components/ExampleGrid.tsx b/apps/landing/src/components/mdx/components/ExampleGrid.tsx
new file mode 100644
index 00000000..a01466f4
--- /dev/null
+++ b/apps/landing/src/components/mdx/components/ExampleGrid.tsx
@@ -0,0 +1,14 @@
+import { Grid } from '@devup-ui/react'
+import { ReactNode } from 'react'
+
+interface ExampleGridProps {
+  children: ReactNode
+}
+
+export function ExampleGrid({ children }: ExampleGridProps) {
+  return (
+    <Grid gap="16px" gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)']}>
+      {children}
+    </Grid>
+  )
+}