사용법
Grid는 상품·카드 목록을 균등하게 배치하는 그리드 블록이에요. columns="auto"로 반응형 열 수를 맞출 수 있어요.
스타일 커스터마이징
Grid 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Grid
className="shadow-md"
style={{
--gtd-grid-min-item-width: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Grid
classNames={{
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-grid-min-item-width | auto 모드 최소 셀 너비 |
인터페이스
GridProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| columns | 1 | 2 | 3 | 4 | "auto" | 2 | 열 수 |
| gap | "xs" | "sm" | "md" | "lg" | md | 셀 간격 |
| minItemWidth | number | 160 | auto 모드 최소 셀 너비(px) |
| children* | ReactNode | — | 그리드 자식 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Grid 컴포넌트 Props 표
가져오기
import { Grid } from "@/components/ui/Grid";