@ceed/cds 1.34.1 → 1.36.0

package/dist/components/layout/Grid.md

@@ -6,19 +6,19 @@ The Grid component is a powerful layout system built on CSS Grid. It uses a 12-c
 
 ```tsx
 <Grid container spacing={args.spacing}>
-  <GridItem xs={6}>
-    <Typography>Item 1 (xs=6)</Typography>
-  </GridItem>
-  <GridItem xs={6}>
-    <Typography>Item 2 (xs=6)</Typography>
-  </GridItem>
-  <GridItem xs={4}>
-    <Typography>Item 3 (xs=4)</Typography>
-  </GridItem>
-  <GridItem xs={8}>
-    <Typography>Item 4 (xs=8)</Typography>
-  </GridItem>
-</Grid>
+    <GridItem xs={6}>
+      <Typography>Item 1 (xs=6)</Typography>
+    </GridItem>
+    <GridItem xs={6}>
+      <Typography>Item 2 (xs=6)</Typography>
+    </GridItem>
+    <GridItem xs={4}>
+      <Typography>Item 3 (xs=4)</Typography>
+    </GridItem>
+    <GridItem xs={8}>
+      <Typography>Item 4 (xs=8)</Typography>
+    </GridItem>
+  </Grid>
 ```
 
 | Field     | Description       | Default |
@@ -60,31 +60,36 @@ function MyComponent() {
 The basic usage of the 12-column grid system.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  12열 그리드 시스템
-</Typography>
-<Grid container spacing={2}>
-  <GridItem xs={12}>xs=12</GridItem>
-  <GridItem xs={6}>xs=6</GridItem>
-  <GridItem xs={6}>xs=6</GridItem>
-  <GridItem xs={4}>xs=4</GridItem>
-  <GridItem xs={4}>xs=4</GridItem>
-  <GridItem xs={4}>xs=4</GridItem>
-  <GridItem xs={3}>xs=3</GridItem>
-  <GridItem xs={3}>xs=3</GridItem>
-  <GridItem xs={3}>xs=3</GridItem>
-  <GridItem xs={3}>xs=3</GridItem>
-</Grid>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        12열 그리드 시스템
+      </Typography>
+      <Grid container spacing={2}>
+        <GridItem xs={12}>xs=12</GridItem>
+        <GridItem xs={6}>xs=6</GridItem>
+        <GridItem xs={6}>xs=6</GridItem>
+        <GridItem xs={4}>xs=4</GridItem>
+        <GridItem xs={4}>xs=4</GridItem>
+        <GridItem xs={4}>xs=4</GridItem>
+        <GridItem xs={3}>xs=3</GridItem>
+        <GridItem xs={3}>xs=3</GridItem>
+        <GridItem xs={3}>xs=3</GridItem>
+        <GridItem xs={3}>xs=3</GridItem>
+      </Grid>
+    </div>
+  </div>
 ```
 
 ### Responsive Grid
@@ -93,46 +98,49 @@ A responsive grid that applies different layouts across different screen sizes.
 
 ```tsx
 <div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  반응형 그리드 (브라우저 크기를 조절해보세요)
-</Typography>
-<Grid container spacing={2}>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <div>
-      <Typography level="body-xs">xs=12</Typography>
-      <Typography level="body-xs">sm=6</Typography>
-      <Typography level="body-xs">md=4</Typography>
-      <Typography level="body-xs">lg=3</Typography>
-    </div>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <div>
-      <Typography level="body-xs">xs=12</Typography>
-      <Typography level="body-xs">sm=6</Typography>
-      <Typography level="body-xs">md=4</Typography>
-      <Typography level="body-xs">lg=3</Typography>
-    </div>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <div>
-      <Typography level="body-xs">xs=12</Typography>
-      <Typography level="body-xs">sm=6</Typography>
-      <Typography level="body-xs">md=4</Typography>
-      <Typography level="body-xs">lg=3</Typography>
-    </div>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <div>
-      <Typography level="body-xs">xs=12</Typography>
-      <Typography level="body-xs">sm=6</Typography>
-      <Typography level="body-xs">md=4</Typography>
-      <Typography level="body-xs">lg=3</Typography>
-    </div>
-  </GridItem>
-</Grid>
-</div>
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      반응형 그리드 (브라우저 크기를 조절해보세요)
+    </Typography>
+    <Grid container spacing={2}>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <div>
+          <Typography level="body-xs">xs=12</Typography>
+          <Typography level="body-xs">sm=6</Typography>
+          <Typography level="body-xs">md=4</Typography>
+          <Typography level="body-xs">lg=3</Typography>
+        </div>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <div>
+          <Typography level="body-xs">xs=12</Typography>
+          <Typography level="body-xs">sm=6</Typography>
+          <Typography level="body-xs">md=4</Typography>
+          <Typography level="body-xs">lg=3</Typography>
+        </div>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <div>
+          <Typography level="body-xs">xs=12</Typography>
+          <Typography level="body-xs">sm=6</Typography>
+          <Typography level="body-xs">md=4</Typography>
+          <Typography level="body-xs">lg=3</Typography>
+        </div>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <div>
+          <Typography level="body-xs">xs=12</Typography>
+          <Typography level="body-xs">sm=6</Typography>
+          <Typography level="body-xs">md=4</Typography>
+          <Typography level="body-xs">lg=3</Typography>
+        </div>
+      </GridItem>
+    </Grid>
+  </div>
 ```
 
 ### Different Spacing
@@ -140,63 +148,77 @@ A responsive grid that applies different layouts across different screen sizes.
 Grid layouts with different spacing values.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  간격 없음 (spacing=0)
-</Typography>
-<Grid container spacing={0}>
-  <GridItem xs={4}>Item 1</GridItem>
-  <GridItem xs={4}>Item 2</GridItem>
-  <GridItem xs={4}>Item 3</GridItem>
-</Grid>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        간격 없음 (spacing=0)
+      </Typography>
+      <Grid container spacing={0}>
+        <GridItem xs={4}>Item 1</GridItem>
+        <GridItem xs={4}>Item 2</GridItem>
+        <GridItem xs={4}>Item 3</GridItem>
+      </Grid>
+    </div>
 
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  작은 간격 (spacing=1)
-</Typography>
-<Grid container spacing={1}>
-  <GridItem xs={4}>Item 1</GridItem>
-  <GridItem xs={4}>Item 2</GridItem>
-  <GridItem xs={4}>Item 3</GridItem>
-</Grid>
-</div>
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        작은 간격 (spacing=1)
+      </Typography>
+      <Grid container spacing={1}>
+        <GridItem xs={4}>Item 1</GridItem>
+        <GridItem xs={4}>Item 2</GridItem>
+        <GridItem xs={4}>Item 3</GridItem>
+      </Grid>
+    </div>
 
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  중간 간격 (spacing=2)
-</Typography>
-<Grid container spacing={2}>
-  <GridItem xs={4}>Item 1</GridItem>
-  <GridItem xs={4}>Item 2</GridItem>
-  <GridItem xs={4}>Item 3</GridItem>
-</Grid>
-</div>
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        중간 간격 (spacing=2)
+      </Typography>
+      <Grid container spacing={2}>
+        <GridItem xs={4}>Item 1</GridItem>
+        <GridItem xs={4}>Item 2</GridItem>
+        <GridItem xs={4}>Item 3</GridItem>
+      </Grid>
+    </div>
 
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  큰 간격 (spacing=4)
-</Typography>
-<Grid container spacing={4}>
-  <GridItem xs={4}>Item 1</GridItem>
-  <GridItem xs={4}>Item 2</GridItem>
-  <GridItem xs={4}>Item 3</GridItem>
-</Grid>
-</div>
-</div>
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        큰 간격 (spacing=4)
+      </Typography>
+      <Grid container spacing={4}>
+        <GridItem xs={4}>Item 1</GridItem>
+        <GridItem xs={4}>Item 2</GridItem>
+        <GridItem xs={4}>Item 3</GridItem>
+      </Grid>
+    </div>
+  </div>
 ```
 
 ### Nested Grid
@@ -205,62 +227,75 @@ You can nest one grid inside another.
 
 ```tsx
 <div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  중첩된 그리드
-</Typography>
-<Grid container spacing={2}>
-  <Grid xs={12} md={8}>
-    <Box sx={{
-      p: 2,
-      bgcolor: 'success.50',
-      borderRadius: 'md',
-      minHeight: 200
-    }}>
-    <Typography level="title-sm" sx={{
-      mb: 2
-    }}>
-    메인 콘텐츠 영역
-  </Typography>
-  <Grid container spacing={1}>
-    <GridItem xs={6}>
-      <Typography level="body-xs">중첩 아이템 1</Typography>
-    </GridItem>
-    <GridItem xs={6}>
-      <Typography level="body-xs">중첩 아이템 2</Typography>
-    </GridItem>
-    <GridItem xs={12}>
-      <Typography level="body-xs">중첩 아이템 3</Typography>
-    </GridItem>
-  </Grid>
-</Box>
-</Grid>
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      중첩된 그리드
+    </Typography>
+    <Grid container spacing={2}>
+      <Grid xs={12} md={8}>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "success.50",
+            borderRadius: "md",
+            minHeight: 200
+          }}
+        >
+          <Typography
+            level="title-sm"
+            sx={{
+              mb: 2
+            }}
+          >
+            메인 콘텐츠 영역
+          </Typography>
+          <Grid container spacing={1}>
+            <GridItem xs={6}>
+              <Typography level="body-xs">중첩 아이템 1</Typography>
+            </GridItem>
+            <GridItem xs={6}>
+              <Typography level="body-xs">중첩 아이템 2</Typography>
+            </GridItem>
+            <GridItem xs={12}>
+              <Typography level="body-xs">중첩 아이템 3</Typography>
+            </GridItem>
+          </Grid>
+        </Box>
+      </Grid>
 
-<Grid xs={12} md={4}>
-  <Box sx={{
-    p: 2,
-    bgcolor: 'warning.50',
-    borderRadius: 'md',
-    minHeight: 200
-  }}>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  사이드바
-</Typography>
-<Grid container spacing={1}>
-  <GridItem xs={12}>
-    <Typography level="body-xs">사이드바 아이템 1</Typography>
-  </GridItem>
-  <GridItem xs={12}>
-    <Typography level="body-xs">사이드바 아이템 2</Typography>
-  </GridItem>
-</Grid>
-</Box>
-</Grid>
-</Grid>
-</div>
+      <Grid xs={12} md={4}>
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: "warning.50",
+            borderRadius: "md",
+            minHeight: 200
+          }}
+        >
+          <Typography
+            level="title-sm"
+            sx={{
+              mb: 2
+            }}
+          >
+            사이드바
+          </Typography>
+          <Grid container spacing={1}>
+            <GridItem xs={12}>
+              <Typography level="body-xs">사이드바 아이템 1</Typography>
+            </GridItem>
+            <GridItem xs={12}>
+              <Typography level="body-xs">사이드바 아이템 2</Typography>
+            </GridItem>
+          </Grid>
+        </Box>
+      </Grid>
+    </Grid>
+  </div>
 ```
 
 ### Auto Layout
@@ -268,43 +303,51 @@ You can nest one grid inside another.
 A grid using auto layout.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '2rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  자동 레이아웃 - 동일한 너비
-</Typography>
-<Grid container spacing={2}>
-  <GridItem xs>자동 너비 1</GridItem>
-  <GridItem xs>자동 너비 2</GridItem>
-  <GridItem xs>자동 너비 3</GridItem>
-</Grid>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "2rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        자동 레이아웃 - 동일한 너비
+      </Typography>
+      <Grid container spacing={2}>
+        <GridItem xs>자동 너비 1</GridItem>
+        <GridItem xs>자동 너비 2</GridItem>
+        <GridItem xs>자동 너비 3</GridItem>
+      </Grid>
+    </div>
 
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  자동 레이아웃 - 내용에 따른 너비
-</Typography>
-<Grid container spacing={2}>
-  <GridItem xs="auto">
-    <Typography>짧은 내용</Typography>
-  </GridItem>
-  <GridItem xs>
-    <Typography>남은 공간을 모두 차지하는 긴 내용</Typography>
-  </GridItem>
-  <GridItem xs="auto">
-    <Typography>또 다른 짧은 내용</Typography>
-  </GridItem>
-</Grid>
-</div>
-</div>
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        자동 레이아웃 - 내용에 따른 너비
+      </Typography>
+      <Grid container spacing={2}>
+        <GridItem xs="auto">
+          <Typography>짧은 내용</Typography>
+        </GridItem>
+        <GridItem xs>
+          <Typography>남은 공간을 모두 차지하는 긴 내용</Typography>
+        </GridItem>
+        <GridItem xs="auto">
+          <Typography>또 다른 짧은 내용</Typography>
+        </GridItem>
+      </Grid>
+    </div>
+  </div>
 ```
 
 ### Complex Layouts
@@ -312,125 +355,148 @@ A grid using auto layout.
 Complex layout examples based on real use cases.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem'
-}}>
-{/* Dashboard Layout */}
-<div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  대시보드 레이아웃
-</Typography>
-<Grid container spacing={2}>
-  {/* Header */}
-  <Grid xs={12}>
-    <Box sx={{
-      p: 3,
-      bgcolor: 'primary.100',
-      borderRadius: 'md',
-      textAlign: 'center'
-    }}>
-    <Typography level="title-lg">대시보드 헤더</Typography>
-  </Box>
-</Grid>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem"
+    }}
+  >
+    {/* Dashboard Layout */}
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        대시보드 레이아웃
+      </Typography>
+      <Grid container spacing={2}>
+        {/* Header */}
+        <Grid xs={12}>
+          <Box
+            sx={{
+              p: 3,
+              bgcolor: "primary.100",
+              borderRadius: "md",
+              textAlign: "center"
+            }}
+          >
+            <Typography level="title-lg">대시보드 헤더</Typography>
+          </Box>
+        </Grid>
+
+        {/* Stats Cards */}
+        <GridItem xs={12} sm={6} lg={3}>
+          <div>
+            <Typography level="title-sm">총 사용자</Typography>
+            <Typography level="h2">1,234</Typography>
+          </div>
+        </GridItem>
+        <GridItem xs={12} sm={6} lg={3}>
+          <div>
+            <Typography level="title-sm">매출</Typography>
+            <Typography level="h2">₩5.6M</Typography>
+          </div>
+        </GridItem>
+        <GridItem xs={12} sm={6} lg={3}>
+          <div>
+            <Typography level="title-sm">주문</Typography>
+            <Typography level="h2">789</Typography>
+          </div>
+        </GridItem>
+        <GridItem xs={12} sm={6} lg={3}>
+          <div>
+            <Typography level="title-sm">전환율</Typography>
+            <Typography level="h2">3.2%</Typography>
+          </div>
+        </GridItem>
+
+        {/* Main Content */}
+        <Grid xs={12} lg={8}>
+          <Box
+            sx={{
+              p: 3,
+              bgcolor: "neutral.50",
+              borderRadius: "md",
+              minHeight: 300
+            }}
+          >
+            <Typography level="title-md">차트 영역</Typography>
+            <Typography level="body-sm">여기에 차트가 들어갑니다</Typography>
+          </Box>
+        </Grid>
+
+        {/* Sidebar */}
+        <Grid xs={12} lg={4}>
+          <Box
+            sx={{
+              p: 3,
+              bgcolor: "success.50",
+              borderRadius: "md",
+              minHeight: 300
+            }}
+          >
+            <Typography level="title-md">최근 활동</Typography>
+            <Typography level="body-sm">활동 목록이 여기 표시됩니다</Typography>
+          </Box>
+        </Grid>
+      </Grid>
+    </div>
 
-{/* Stats Cards */}
-<GridItem xs={12} sm={6} lg={3}>
-  <div>
-    <Typography level="title-sm">총 사용자</Typography>
-    <Typography level="h2">1,234</Typography>
-  </div>
-</GridItem>
-<GridItem xs={12} sm={6} lg={3}>
-  <div>
-    <Typography level="title-sm">매출</Typography>
-    <Typography level="h2">₩5.6M</Typography>
-  </div>
-</GridItem>
-<GridItem xs={12} sm={6} lg={3}>
-  <div>
-    <Typography level="title-sm">주문</Typography>
-    <Typography level="h2">789</Typography>
-  </div>
-</GridItem>
-<GridItem xs={12} sm={6} lg={3}>
-  <div>
-    <Typography level="title-sm">전환율</Typography>
-    <Typography level="h2">3.2%</Typography>
+    {/* Product Grid */}
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        제품 그리드
+      </Typography>
+      <Grid container spacing={2}>
+        {[1, 2, 3, 4, 5, 6].map((item) => (
+          <Grid key={item} xs={12} sm={6} md={4} lg={2}>
+            <Box
+              sx={{
+                p: 2,
+                bgcolor: "background.body",
+                border: "1px solid",
+                borderColor: "divider",
+                borderRadius: "md",
+                textAlign: "center"
+              }}
+            >
+              <Box
+                sx={{
+                  width: "100%",
+                  height: 80,
+                  bgcolor: "neutral.100",
+                  borderRadius: "sm",
+                  mb: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <Typography level="body-xs">제품 {item}</Typography>
+              </Box>
+              <Typography level="body-sm">제품명</Typography>
+              <Typography
+                level="body-xs"
+                sx={{
+                  color: "text.secondary"
+                }}
+              >
+                ₩10,000
+              </Typography>
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+    </div>
   </div>
-</GridItem>
-
-{/* Main Content */}
-<Grid xs={12} lg={8}>
-  <Box sx={{
-    p: 3,
-    bgcolor: 'neutral.50',
-    borderRadius: 'md',
-    minHeight: 300
-  }}>
-  <Typography level="title-md">차트 영역</Typography>
-  <Typography level="body-sm">여기에 차트가 들어갑니다</Typography>
-</Box>
-</Grid>
-
-{/* Sidebar */}
-<Grid xs={12} lg={4}>
-  <Box sx={{
-    p: 3,
-    bgcolor: 'success.50',
-    borderRadius: 'md',
-    minHeight: 300
-  }}>
-  <Typography level="title-md">최근 활동</Typography>
-  <Typography level="body-sm">활동 목록이 여기 표시됩니다</Typography>
-</Box>
-</Grid>
-</Grid>
-</div>
-
-{/* Product Grid */}
-<div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  제품 그리드
-</Typography>
-<Grid container spacing={2}>
-  {[1, 2, 3, 4, 5, 6].map(item => <Grid key={item} xs={12} sm={6} md={4} lg={2}>
-  <Box sx={{
-    p: 2,
-    bgcolor: 'background.body',
-    border: '1px solid',
-    borderColor: 'divider',
-    borderRadius: 'md',
-    textAlign: 'center'
-  }}>
-  <Box sx={{
-    width: '100%',
-    height: 80,
-    bgcolor: 'neutral.100',
-    borderRadius: 'sm',
-    mb: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }}>
-  <Typography level="body-xs">제품 {item}</Typography>
-</Box>
-<Typography level="body-sm">제품명</Typography>
-<Typography level="body-xs" sx={{
-  color: 'text.secondary'
-}}>
-₩10,000
-</Typography>
-</Box>
-</Grid>)}
-</Grid>
-</div>
-</div>
 ```
 
 ### Breakpoint Demo
@@ -439,54 +505,60 @@ An example showing how Grid behaves at each breakpoint.
 
 ```tsx
 <div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  브레이크포인트 데모 - 각 화면 크기에서 다른 레이아웃
-</Typography>
-
-<Box sx={{
-  mb: 2
-}}>
-<Typography level="body-sm" sx={{
-  color: 'text.secondary'
-}}>
-• xs (0px+): 모든 아이템이 한 줄로
-<br />
-• sm (600px+): 2개씩 배치
-<br />
-• md (900px+): 3개씩 배치
-<br />• lg (1200px+): 4개씩 배치
-</Typography>
-</Box>
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      브레이크포인트 데모 - 각 화면 크기에서 다른 레이아웃
+    </Typography>
+
+    <Box
+      sx={{
+        mb: 2
+      }}
+    >
+      <Typography
+        level="body-sm"
+        sx={{
+          color: "text.secondary"
+        }}
+      >
+        • xs (0px+): 모든 아이템이 한 줄로
+        <br />• sm (600px+): 2개씩 배치
+        <br />• md (900px+): 3개씩 배치
+        <br />• lg (1200px+): 4개씩 배치
+      </Typography>
+    </Box>
 
-<Grid container spacing={2}>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">첫 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">두 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">세 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">네 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">다섯 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">여섯 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">일곱 번째 아이템</Typography>
-  </GridItem>
-  <GridItem xs={12} sm={6} md={4} lg={3}>
-    <Typography level="body-sm">여덟 번째 아이템</Typography>
-  </GridItem>
-</Grid>
-</div>
+    <Grid container spacing={2}>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">첫 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">두 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">세 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">네 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">다섯 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">여섯 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">일곱 번째 아이템</Typography>
+      </GridItem>
+      <GridItem xs={12} sm={6} md={4} lg={3}>
+        <Typography level="body-sm">여덟 번째 아이템</Typography>
+      </GridItem>
+    </Grid>
+  </div>
 ```
 
 ## Grid System
@@ -497,12 +569,24 @@ Grid is based on a 12-column system. Each item can span 1 to 12 columns.
 
 ```tsx
 <Grid container spacing={2}>
-  <Grid item xs={12}>전체 너비 (12/12)</Grid>
-  <Grid item xs={6}>절반 너비 (6/12)</Grid>
-  <Grid item xs={6}>절반 너비 (6/12)</Grid>
-  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
-  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
-  <Grid item xs={4}>3분의 1 너비 (4/12)</Grid>
+  <Grid item xs={12}>
+    전체 너비 (12/12)
+  </Grid>
+  <Grid item xs={6}>
+    절반 너비 (6/12)
+  </Grid>
+  <Grid item xs={6}>
+    절반 너비 (6/12)
+  </Grid>
+  <Grid item xs={4}>
+    3분의 1 너비 (4/12)
+  </Grid>
+  <Grid item xs={4}>
+    3분의 1 너비 (4/12)
+  </Grid>
+  <Grid item xs={4}>
+    3분의 1 너비 (4/12)
+  </Grid>
 </Grid>
 ```
 
@@ -652,7 +736,9 @@ You can let items size and position automatically without explicitly defining th
   </Grid>
 
   <Grid item xs={12}>
-    <Button type="submit" fullWidth>Submit</Button>
+    <Button type="submit" fullWidth>
+      Submit
+    </Button>
   </Grid>
 </Grid>
 ```