Grid
유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다Property
Template
Grid의 행과 열 템플릿을 설정하여 레이아웃 구조를 정의할 수 있습니다.
Flow
Grid 아이템들의 자동 배치 방향을 설정할 수 있습니다.
Inline
Grid를 인라인 요소로 표시할 수 있습니다.
Span
Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니다.
Examples
Layout Patterns
일반적인 레이아웃 패턴들을 Grid로 구현할 수 있습니다.
Props Table
Grid.Root
Grid 복합 컴포넌트의 루트. CSS grid로 자식을 행과 열에 배치하는 컨테이너입니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
flow? | row | rowcolumnrow-densecolumn-dense |
className? | - | stringfunction |
inline? | - | boolean |
style? | - | React.CSSPropertiesfunction |
templateColumns? | - | string |
templateRows? | - | string |
render? | - | ReactElementfunction |
Grid.Item
Grid.Root 안에서 여러 행과 열에 걸쳐 배치할 수 있는 항목. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
colSpan? | - | string |
rowSpan? | - | string |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |